<Navigate/>react-router-dom v6

Question

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

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

怎么了？

Answer 1

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

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

<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;
}