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

我想要将私有路由与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>

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

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

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

错误：[Abc] 不是 组件。的所有子组件必须是 或

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

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

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

Also

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

PIC代码已满 https://i.stack.imgur.com/iKOl2.png

In react-router-dom版本6没有render支撑Route成分。您还可以简化您的PrivateRoute包装组件一点，它不需要渲染更多Routes and Route成分。

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

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

Usage:

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

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

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

Usage:

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