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