reactjs 使用react路由器dom v6时导航速度慢

deikduxw  于 2022-12-18  发布在  React
关注(0)|答案(1)|浏览(152)

我试图将登录页面链接到 Jmeter 板,然后 Jmeter 板链接到详细信息页面,也会有一个注销,把我带到登录页面再次。但导航是如此缓慢。有什么问题,在我定义我的路线的方式?

<Routes>
          <Route element={<PrivateRoutes />}>
            <Route path="/dashboard" element={<Dashboard />} />
            <Route
              path="/dashboard/:measurementId"
              element={<MeasurementDetails />}
            />
          </Route>
          <Route path="/login" element={<Login />} />
        </Routes>

这是专用路由组件

const PrivateRoutes = () => {
  const hasToken = LocalStorageService.getElement('token')
    return (
      <> 
        {hasToken ? <Outlet/> : <Navigate to='/login'/>}
      </>
  )
}

export default PrivateRoutes

我在登录时使用的路径如下

onSubmit: async (data) => {
      setIsLoading(true);
      try {
        await auth.login(data);
        navigate("/dashboard");
      }


Jmeter 板基本上只是一个项目行列表,每个行都是可选的,并将您带到详细信息页面

onRowSelect={(rowData) =>
            !isLoading && navigate(`/dashboard/${rowData.data.id}`)
          }

然后按钮离开详细信息页面

<Button
          onClick={() => navigate(`/dashboard`)}
          label="Indietro " />
guicsvcw

guicsvcw1#

答案来自一位评论者,@unhackit,内容如下

<Routes>
      <Route path="/login" element={<Login />} />
        <Route path="/dashboard" element={<PrivateRoutes />}>
          <Route index element={<Dashboard />} />
          <Route path=":measurementId" element={<MeasurementDetails />} />
       </Route>
     </Routes>

相关问题