时间戳

首页 > 解决方案 > 反应路由器dom v6

reactjs - 反应路由器dom v6

问题描述

当条件错误时，我无法理解如何进行强制重定向。

{
  login ? (
   <Routes>
    <Route path='/profile' element={<Profile/>}/>
    <Route path='/chat' element={<Chat/>}/>
    <Route path='/' element={<UserList/>}/>
   </Routes>
   ) :
   (
   <Routes>
    <Route path='/login' element={<Login/>}/>
    <Navigate to='/login' state={{from: location}}/>
   </Routes>
   )
}

怎么了？

标签： reactjsreact-router-dom

解决方案

您正在根据登录状态创建一组不同的路由。那是错误的。您的路线不应受到限制。相反，您想要的是重定向（V6 中的术语是navigate）用户从他不允许访问的页面到他所在的页面。同样，如果请求的路线不存在，这将很难实现。

以下是您可以解决的方法：

<Routes>
  <Route path="/" element={<PublicPage />} />
  <Route path="/login" element={<LoginPage />} />
  <Route
    path="/protected"
    element={
      <RequireAuth>
        <ProtectedPage />
      </RequireAuth>
    }
  />
</Routes>

和：

const RequireAuth = () => {
  let auth = useAuth();

  if (!auth.user) {
    return <Navigate to="/login" />;
  }

  return children;
}

推荐阅读