react-router-dom@6.0.0-beta.0私有路由配置报错及子组件不渲染问题求解

• react-router-dom v6 嵌套路由要求父路由的渲染组件必须渲染 <Outlet> 承载子路由内容，当前ProtectedRoute未实现该逻辑，反而额外封装了<Routes>和<Route>，打断了外层路由匹配链，导致子路由无法渲染
• 父子路由重复定义相同path，属于冗余配置，不符合v6的路由匹配规则

1. 修改ProtectedRoute组件 #

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

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

  if (login === true) return <Outlet />;
  else if (login === false) return <Navigate to="/login" replace />;
  else return null;
};

export default ProtectedRoute;

2. 修改App组件路由配置 #

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/>}>
                {/* index属性代表父路由默认子路由，无需重复写path */}
                <Route index element={<User/>}/>
              </Route>
            </Routes>
          </>
        </UserStorage>
      </BrowserRouter>
    </div>
  )
}

export default App;

以上实现兼容react-router-dom v6全版本（包括你使用的beta.0版到后续正式稳定版），<Outlet> 是v6专门用来承载嵌套子路由内容的API，替代了v5的children嵌套渲染逻辑。给Navigate添加replace属性可以避免用户登录后点击浏览器回退按钮重复回到登录页的问题。

内容的提问来源于stack exchange，提问作者DevMarilia