如何在react-router-dom@v6中使用私有路由

Question

我想将私有路由与react-router-dom v6一起使用，同时我尝试应用身份验证条件。

在 App.js 中

<Route path='/dashboard' element= { <PrivateRoute><Abc /></PrivateRoute>}/>

在组件 .js 中

<Routes> <Route {...rest} render={props => !isAuthenticated && !loading ? (<Navigate to='/login' />) : (<Component {...props} />)} /></Routes>

• 当路线不在 <Routes> 内部时，会出现错误：

错误： <Route> 只能用作 <Routes> 元素的子元素，不能直接渲染。请将您的内容封装在 <Routes> 中

• 当它位于 <Routes> 内部时，它会给出错误：

错误：[Abc] 不是 <Route> 组件。的所有子组件必须是 <Route> 或 <React.Fragment>

请帮我解决这种情况吗？或者有什么建议。

尝试过此操作，但在两种情况下均出现上述错误之一

<Route path='/dashboard' element= {<PrivateRoute> <Dashboard />
         </PrivateRoute>}/>

还

`<PrivateRoute path='/dashboard' element= { <Dashboard />}/>`

PIC代码完整

Answer 1

在版本 6 中，该组件react-router-dom没有prop 。您还可以稍微简化您的包装器组件，它不需要渲染更多组件。renderRoutePrivateRouteRoutesRoute

有条件地渲染组件的子组件或导航以登录。

const PrivateRoute = ({ auth: { isAuthenticated }, children }) => {
  return isAuthenticated ? children : <Navigate to="/login" />;
};

用法：

<Route
  path="/dashboard"
  element={
    <PrivateRoute>
      <Dashboard />
    </PrivateRoute>
  }
/>

稍微改进的版本允许嵌套更多私有路由组件，利用出口来处理嵌套路由的渲染。

const PrivateWrapper = ({ auth: { isAuthenticated } }) => {
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
};

用法：

<Route element={<PrivateWrapper />}>
  <Route path="/dashboard" element={<Dashboard />} />
</Route>

Answer 2

这是您可以使用的私有路由，目前它的工作版本为 v6.0.2

export const PrivateRoute = ({ children}) => {
  const isAuthenticated = true;
      
  if (isAuthenticated ) {
    return children
  }
    
  return <Navigate to="/" />
}

这就是您使用私人路线的方式

 <Route
          path="/dashboard"
          element={
            <PrivateRoute>
              <Dashboard />
            </PrivateRoute>
          }
        />