React Router 6中PublicRoute组件路由渲染异常求助

问题根源 #

React Router v6 对<Routes>的子组件有严格要求：只能是<Route>或<React.Fragment>，不能直接放自定义组件（比如你写的<PublicRoute>），这就是最初报错的原因。你后续尝试的嵌套路由、在自定义组件里包<Routes>的方法，都偏离了v6的正确用法，导致页面无法渲染。

正确实现方案 #

v6中，权限路由（Public/Private Route）的正确思路是：写一个包装组件，用来包裹页面组件，在包装组件里做权限判断，决定渲染目标组件还是跳转，然后把这个包装后的组件放到<Route>的element属性中。

1. 修改PublicRoute组件 #

把它改成纯包装组件，不再返回<Route>：

import React from 'react';
import { Navigate } from 'react-router';

function PublicRoute({ children }) {
  // 替换成你的实际登录状态判断逻辑，比如从Context/Redux获取
  const isLoggedIn = false;

  // 如果已登录，跳转到首页；否则渲染目标页面
  return isLoggedIn ? <Navigate to="/" replace /> : children;
}

export default PublicRoute;

2. 修改App.js中的路由配置 #

将<PublicRoute>作为页面组件的包裹层，放到<Route>的element里：

import React from 'react';

import 'rsuite/dist/rsuite.min.css';
import './styles/main.scss';
import { Routes, Route } from 'react-router'; // 记得导入Route
import SignIn from './pages/SignIn';
import PrivateRoute from './components/PrivateRoute';
import Home from './pages/Home';
import PublicRoute from './components/PublicRoute';

function App() {
  return (
    <Routes>
      <Route 
        path="/signin" 
        element={
          <PublicRoute>
            <SignIn />
          </PublicRoute>
        } 
      />
      <Route 
        path="/" 
        element={
          <PrivateRoute>
            <Home />
          </PrivateRoute>
        } 
      />
    </Routes>
  );
}

export default App;

3. 补充PrivateRoute的正确写法（参考） #

和PublicRoute逻辑相反，未登录时跳转到登录页：

import React from 'react';
import { Navigate } from 'react-router';

function PrivateRoute({ children }) {
  // 替换成实际的登录状态判断
  const isLoggedIn = true;

  return isLoggedIn ? children : <Navigate to="/signin" replace />;
}

export default PrivateRoute;

为什么之前的方法无效？ #

• 最初直接把<PublicRoute>作为<Routes>的子组件：违反v6的路由规则，所以报错。
• 尝试在<Route>里嵌套<Route>：v6的嵌套路由需要父路由路径末尾加/*，但这种写法是为了子路由匹配，不是用来做权限守卫的，反而会导致组件层级混乱，无法正确渲染页面。
• 在<PublicRoute>里包裹<Routes>：导致嵌套路由结构，加上路径匹配的问题，最终页面组件无法被正确渲染。

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