React Router V6：防止用戶直接訪問子路由並重定向到父路由

Question

我的路線設置如下：

<Route path={`/home`} element={<PrivateRoute />}>
    <Route
        index={true}
        element={<Home />}
    />
    <Route path={`settings`} element={<Settings />} />
</Route>

在這里，當用戶直接從瀏覽器打開/home/settings時，我想將用戶重定向回根目錄 ( /home )。 也就是說，我不希望用戶在打開父路由之前打開任何子路由。

注意：這與身份驗證無關。

這是我嘗試過的：在PrivateRoute組件中，我使用上下文來存儲用戶訪問過的路徑名。 每次打開頁面時，我都會檢查/home路徑是否存在。 如果沒有，我將用戶路由到/home 。 但我覺得這對代碼的可維護性非常不利，也可能不是正確的做法。

Answer 1

您可以存儲 boolean state 的"/home"路徑已被訪問，而不是存儲和檢查用戶訪問過的所有路徑。 我建議使用幾個布局路由，一個提供homeVisited state 和一個回調以更新 state。一個布局路由提供上下文，而另一個布局處理重定向到"/home"如果尚未訪問）。

例子：

const HomeCheckProviderLayout = () => {
  const [visited, setVisited] = React.useState();

  const visitedHome = () => setVisited(true);

  return <Outlet context={{ visited, visitedHome }} />;
};

const HomeCheckLayout = () => {
  const { visited } = useOutletContext();

  return visited ? <Outlet /> : <Navigate to="/home" replace />;
};

Home組件使用useOutletContext掛鈎訪問visitedHome以在useEffect掛鈎中觸發。

const Home = () => {
  const { visitedHome } = useOutletContext();

  React.useEffect(() => {
    visitedHome();
  }, [visitedHome]);

  ....
};

路由配置：

<Routes>
  <Route element={<PrivateRoute />}>
    <Route path="/home" element={<HomeCheckProviderLayout />}>
      <Route index element={<Home />} />
      <Route element={<HomeCheckLayout />}>
        <Route path="settings" element={<Settings />} />
        ... other routes that should redirect to `"/home"` if unvisited yet ...
      </Route>
    </Route>
    ... other protected routes ...
  </Route>
  ... other routes ...
</Routes>