“react-router-dom”中的私有路由：“6.0.0-beta.0”答案

【问题标题】：Private routes in "react-router-dom": "6.0.0-beta.0"“react-router-dom”中的私有路由：“6.0.0-beta.0”
【发布时间】：2022-01-08 01:11:57
【问题描述】：

请帮帮我

当 Route 不在 <Routes> 内时，它会报错：错误：A 只能用作元素的子元素，从不直接渲染。请把你的

当它在<Routes> 内时，它会给出一个错误：错误：[Abc] 不是 <Route> 组件。的所有子组件必须是 <Route> 或 <React.Fragment>

请帮我解决这种情况？或任何建议。

在这两种情况下都尝试过，但出现上述错误之一。

由于这不会产生错误，但是我的私有路由的子组件不会呈现。

import React from 'react'
import './App.css'
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import Header from './components/Header'
import Home from './components/Home'
import Login from './components/Login'
import ProtectedRoute from './components/Helper/ProtectedRoute';
import { UserStorage } from './UserContext';
import User from './components/User';

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <UserStorage>
          <>
            <Header />
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="login/*" element={<Login />} />
              <Route path='/conta' element={<ProtectedRoute/>}>
                <Route path='/conta' element={<User/>}/>
              </Route>
            </Routes>
          </>
        </UserStorage>
      </BrowserRouter>
    </div>
  )
}

export default App;

受保护的路由

import React from 'react';
import { UserContext } from '../../UserContext';
import {Routes, Route,  Navigate } from 'react-router-dom';

const ProtectedRoute = (props) => {
  const { login } = React.useContext(UserContext);

  if (login === true) return (
    <Routes>
      <Route {...props} />
    </Routes>
  );
  else if (login === false) return <Navigate to="/login" />;
  else return null;
};

export default ProtectedRoute;

【问题讨论】：

标签： javascript reactjs react-hooks react-router react-router-dom

【解决方案1】：

使用像 ProtectedRoute 这样的布局包装组件会渲染嵌套的 Route 组件，那么您需要确保它正在渲染一个 Outlet 以便将它们渲染到。

Outlet

import React from 'react';
import { UserContext } from '../../UserContext';
import {Routes, Route,  Navigate } from 'react-router-dom';

const ProtectedRoute = () => {
  const { login } = React.useContext(UserContext);

  if (login === undefined) return null;

  return login
    ? <Outlet /> // <-- nested Route components rendered here
    : <Navigate to="/login" replace />;
};

...

<Route path='/conta' element={<ProtectedRoute/>}>
  <Route path='/conta' element={<User/>}/> // <-- rendered into outlet
</Route>

【讨论】：