反应：使用插座和路由器 V6 的专用路由

Question

我目前正在使用react-router6和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组件在任何私有路由之间导航时都不会运行，只有在第一次进入其中一个PrivateRoutes时才会运行。

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

我尝试使用从react-router-dom导入的Link和useNavigate，但都没有重新触发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挂钩来侦听路由更改。我假设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 />;
}