reactjs - react : Private Routes Using Outlet & Router V6

Question

我目前正在使用 react-router 创建专用路由6 和 Outlet .我有一个简单的设置如下:

App.js 中的路由

return (
  <BrowserRouter>
    <div className="App">
      <Routes>
        <Route path="/" element={<Login />}></Route>
        <Route path="/register" element={<Register />}></Route>
        <Route element={<PrivateRoutes />}>
          <Route path="/dashboard" element={<Dashboard />}></Route>
          <Route path="/reports" element={<Reports />}></Route>
          <Route path="/settings" element={<Settings />}></Route>
        </Route>
      </Routes>
    </div>
  </BrowserRouter>
);

PrivateRoutes 组件

const PrivateRoutes = () => {
  console.log("Private Routes was run");
  validToken = true;

  return (
    (checkToken()) ? <Outlet/> : <Navigate to="/" />
  );
}

不过我注意到的是 PrivateRoutes在之间 任何私有(private)路线导航时，组件不会运行，只有在第一次进入 PrivateRoutes 之一时才会运行.

例如，我想要 PrivateRoutes当我在 /dashboard 之间导航时要运行的组件和 /reports使用我的主导航的路线。

我尝试同时使用 Link和 useNavigate从 react-router-dom 进口, 但都不会重新触发 PrivateRoutes组件。

<div id='nav-links' className='flex flex-row'>
  <div onClick={() => navigate('/dashboard')}>Dashboard</div>
  <div onClick={() => navigate('/reports')}>Reports</div>
  <div onClick={() => navigate('/settings')}>Settings</div>
</div>

和

<div id='nav-links' className='flex flex-row'>
  <Link to='/dashboard'>Dashboard</Link>
  <Link to='/reports'>Reports</div>
  <Link to='/settings'>Settings</div>
</div>

我缺少或不理解什么？是否有可以使用的简单语法调整 PrivateRoutes总是在导航时运行？

Answer 1

您的路线没问题。您需要将 checkToken 与路由更改结合起来。您可以使用 useLocation 和 useEffect Hook 监听路由变化。我假设 checkToken 是同步的。

例子:

const PrivateRoutes = () => {
  const { pathname } = useLocation();

  const [isValidToken, setIsValidToken] = useState(); // <-- initially undefined

  useEffect(() => {
    // initial mount or route changed, check token
    setIsValidToken(!!checkToken());
  }, [pathname]);

  if (isValidToken === undefined) {
    return null; // or loading indicator/spinner/etc
  }

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