react-router-dom v6 [重复]

【问题标题】：<Navigate/> react-router-dom v6 [duplicate]<Navigate/> react-router-dom v6 [重复]
【发布时间】：2021-11-05 11:39:08
【问题描述】：

我不明白在条件错误时如何进行强制重定向。

{
  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>
   )
}

怎么了？

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

您正在根据登录状态创建一组不同的路由。那是错误的。您的路线不应受到限制。相反，您想要的是重定向（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;
}

【讨论】：