導航到路線時超過最大深度更新錯誤 react-router v6

Question

我正在使用 react-router v6 我正在嘗試保護某些路由，如果用戶未通過身份驗證則不授予訪問權限。 我正在使用令牌來確定用戶是否已通過身份驗證。 在我使用登錄詳細信息而不是返回todos路由登錄到應用程序后，它沒有顯示任何內容。 我在控制台上收到此錯誤消息Maximum depth update exceeded 。 但是，如果我不保護路線，它就可以正常工作。

這就是我保護路線的方式。

const token = useSelector(state => state.authDetails.token );

  let routes = (
    <Routes>
      
      <Route path='/signUp' exact  element={<SignUpForm />}/>
      <Route path='/'  exact element={<LoginForm />}/>
      <Route path='*' replace element={<Navigate to="/" />}/>
    </Routes>
  )

  if(token !== null ) {
    routes = (
      <Routes>

        <Route path='/todos' element={<AddTodo/>}/>
        <Route path='/logout' element={<Logout/>}/>
        <Route path='*' replace element={<Navigate to="/" />}/>
      </Routes>
    )
  }

 return (
    <div className="App">
      <header>
         <Navbar />
      </header>
        
         {routes}

        
    </div>
  );

Answer 1

問題

當token !== null您返回一組路由，其中包括重定向到"/"但不包括為"/"呈現路徑的路由，因此應用程序陷入重定向到非存在的路線。

解決方案

在您的“已驗證”路徑中包含帶有path="/"的路由，或重定向到正在呈現的路由，例如 `"/todos"：

const token = useSelector(state => state.authDetails.token);

let routes = (
  <Routes>
    <Route path='/signUp' exact  element={<SignUpForm />} />
    <Route path='/'  exact element={<LoginForm />} />
    <Route path='*' element={<Navigate to="/" replace />} />
  </Routes>
);

if (token !== null) {
  routes = (
    <Routes>
      <Route path='/todos' element={<AddTodo/>} />
      <Route path='/logout' element={<Logout/>} />
      <Route path='*' element={<Navigate to="/todos" replace />} />
    </Routes>
  );
}

return (
  <div className="App">
    <header>
      <Navbar />
    </header>
    {routes}
  </div>
);

一個改進的解決方案是創建一個經過身份驗證的包裝器組件並包裝您要保護的路由。

例子：

import { Navigate, Outlet } from 'react-router-dom';

const AuthWrapper = () => {
  const token = useSelector(state => state.authDetails.token);

  return token !== null ? <Outlet /> : <Navigate to="/" replace />;
};

...

return (
  <div className="App">
    <header>
      <Navbar />
    </header>
    <Routes>
      <Route path='/signUp' element={<SignUpForm />} />
      <Route path='/' element={<LoginForm />} />
      <Route element={<AuthWrapper />}>
        <Route path='/todos' element={<AddTodo />} />
        <Route path='/logout' element={<Logout />} />
      </Route>
      <Route path='*' element={<Navigate to="/" replace />} />
    </Routes>
  </div>
);

更新

如果您需要有條件地重定向到通配符路由上的不同目標，則創建另一個包裝器來處理身份驗證檢查。

例子：

const RedirectWrapper = () => {
  const token = useSelector(state => state.authDetails.token);

  return <Navigate to={token !== null ? "/todos" : "/" replace />;
};

...

return (
  <div className="App">
    <header>
      <Navbar />
    </header>
    <Routes>
      <Route path='/signUp' element={<SignUpForm />} />
      <Route path='/' element={<LoginForm />} />
      <Route element={<AuthWrapper />}>
        <Route path='/todos' element={<AddTodo />} />
        <Route path='/logout' element={<Logout />} />
      </Route>
      <Route path='*' element={<RedirectWrapper />} />
    </Routes>
  </div>
);