如何修复「PrivateRoute 不是<Route>组件」的报错？

报错原因 #

React Router v6 规定<Routes>的直接子节点只能是<Route>或<React.Fragment>，你自定义的CustomRoute组件并非标准的<Route>组件，直接嵌套在<Routes>下会触发该报错。

修复方案 #

调整自定义路由的实现逻辑，将其改为布局包裹组件，作为<Route>的element属性值使用：

1. 重写路由逻辑组件

const CustomRouteWrapper = ({ children, fallbackUrl }) => {
  // 当无来源页时跳转到指定地址
  if (!document.referrer.length) {
    // 使用replace避免生成无用的历史记录
    return <Navigate to={fallbackUrl} replace />;
  }
  return children;
};

2. 修改路由配置

<Router basename={config.historyBasename}>
  <Routes>
    <Route 
      path={routes.userActive} 
      element={
        <CustomRouteWrapper fallbackUrl={routes.landingPage}>
          <Activate />
        </CustomRouteWrapper>
      } 
    />
  </Routes>
</Router>

额外说明 #

• 原逻辑中document.referrer为空的场景（比如用户直接在地址栏输入该路由），会触发跳转，符合你的需求
• 加入replace属性可优化浏览器历史记录，避免用户点击返回时回到原路由再跳转的循环

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