如何在REACT-RUTER-DOM@V6中使用专用路由 [英] How to use Private route in react-router-dom@v6

问题描述

在尝试应用身份验证条件时，我希望将专用路由与Reaction-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&>内部时，它会显示错误：

错误：A<；routes>；仅用作<；routes&>元素的子元素，从不直接呈现。请用<；routes>；

包好

• 当它位于<；routes&>内部时，它会给出如下错误：

错误：[ABC]不是<；路径&>组件。的所有组件子项必须是<；Routing&>或<；React.Fragment&>

请帮助我解决此问题？或任何建议。

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

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

也

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

PICCode full

推荐答案

在react-router-dom版本6中，render组件没有道具。您还可以稍微简化一下PrivateRoute包装组件，它不需要呈现更多的Routes和Route组件。

有条件地呈现组件的子项或导航以登录。

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>

这篇关于如何在REACT-RUTER-DOM@V6中使用专用路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！