文章/答案/技术大牛

发布

社区首页 >问答首页 >React:使用出口和路由器V6的私人线路

问React:使用出口和路由器V6的私人线路
EN

Stack Overflow用户

提问于 2022-08-06 22:38:05

回答 1查看 728关注 0票数 2

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

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

我尝试使用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总是运行在导航上？

reactjs

react-router

react-router-dom

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-07 00:08:45

你的路线很好。您将希望将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 />;
}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73263706

复制

相似问题

问React:使用出口和路由器V6的私人线路
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React:使用出口和路由器V6的私人线路EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React:使用出口和路由器V6的私人线路
EN