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

IT技术 reactjs react-router-dom
2021-05-07 02:21:23

我想将私有路由与 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>
  • 当 Route 不在 <Routes> 内时，它会给出一个错误：

错误：<Route> 只能用作 <Routes> 元素的子元素，永远不会直接呈现。请将您的包裹在 <Routes> 中

  • 当它在 <Routes> 内时，它会给出如下错误：

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

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

试过这个，但在两种情况下都出现上述错误之一

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

还

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

PIC代码已满

2个回答

在react-router-dom版本 6 中没有组件的renderprop Route。您还可以简化您的PrivateRoute包装组件一点，它不需要更多的渲染Routes和Route组件。

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

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

用法：

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

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

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

用法：

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

编辑 how-to-use-private-route-in-react-router-domv6

这是您可以使用的私人路线，目前在 v6.0.2 上工作

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

这是您使用私有路由的方式

 <Route
          path="/dashboard"
          element={
            <PrivateRoute>
              <Dashboard />
            </PrivateRoute>
          }
        />
其它你可能感兴趣的问题
上一篇以“React 方式”处理 React 事件：提供事件与将结果提供给回调 下一篇gitlab 上的 CI/CD 无法使用 babel-loader 进行编译