React Router v6使用自定义PrivateRoute提示非<Route>组件如何解决

报错核心原因 #

React Router v6 强制要求 <Routes> 组件的直接子组件只能是原生 <Route> 或 <React.Fragment>，你自定义的 <PrivateRoute> 不属于上述两类，直接作为 <Routes> 的子元素就会触发该报错。你当前的写法是 React Router v5 的旧用法，v6 已不支持。

改造步骤 #

1. 重写PrivateRoute.js #

去掉组件内返回 <Route> 的逻辑，改为仅做鉴权判断，返回对应内容即可：

import React from 'react';
import { Navigate } from "react-router-dom";
import { isauth }  from 'auth'

function PrivateRoute({ children }) {
  const authed = isauth() // isauth() returns true or false based on localStorage
  return authed ? children : <Navigate to="/Home"  />;
}

export default PrivateRoute

2. 修改路由配置写法 #

将自定义的<PrivateRoute>放到原生<Route>的element属性内，包裹需要鉴权的业务组件：

...
<Route exact path="/" element={<PrivateRoute><Dashboard/></PrivateRoute>}/>
<Route exact path="/home" element={<Home/>}/>

修改后即可正常运行，私有路由的鉴权逻辑不会受影响。

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