React-router-dom 導航不渲染頁面

Question

我正在嘗試使用一個函數來驗證存儲在本地存儲中的用戶訪問令牌，如果令牌無效，我想將用戶重定向到 /login 頁面，但它不起作用。 如果我使用 useNavigate，它會起作用。 下面是我的代碼。

axios.get(`${REACT_APP_EXPRESS_BACKEND_URL}/authroute/verifyjwt`, {
          headers: {
            Authorization: `Bearer ${auth?.accessToken}`,
          },
          withCredentials: true,
        })
        .then((res) => {
          if (res?.data?._id) {
            dispatch(
              userLoggedIn({
                accessToken: auth.accessToken,
                profile: auth.profile,
                user: auth.user,
                timestamp: auth?.timestamp,
              })
            );
             return children;
            }
          else {
            dispatch(userLoggedOut());
            localStorage.removeItem("accessToken");
            return <Navigate to="/login" state={{ from: location }} replace />;
          }
        })

Answer 1

<Navigate />是一個 React 組件。 它僅在渲染時有效（即它由 React 組件直接返回）。

嚴格地談論你的代碼片段我會說鈎子也不應該工作，因為鈎子也必須在 React（功能）組件內部調用。 我假設您的代碼出於某種原因實際上位於 React 組件內，並且您正確地調用了組件根上的鈎子。 您可能對useDispatch做同樣的事情。

如果您需要在那個特定的地方重定向（並且您的代碼不在React 組件內），您必須通過使用history.push之類的命令來強制使用 history API。 如果代碼確實在 React 組件中，那么只需使用useNavigate鈎子，一切都應該沒問題。

作為旁注，它也適用於 Redux。 例如，如果您需要在 React 組件外部訪問商店狀態，您將無法使用useSelector ，因為它是一個鈎子，而且必須在功能組件內部調用。 那是您需要實際導入store並強制調用store.getState()的時候。

我提到這一點是因為通常網絡請求是在 React 組件之外處理的，有時您可能需要訪問存儲狀態。

希望這可以幫助：）

Answer 2

首先讓你的進口

import {useNavigate} from 'react-router-dom';

// Add a variable using the useNavigate hook.

const navigate = useNavigate();

// Change this line from this

return <Navigate to="/login" state={{ from: location }} replace />;

// to this

return navigate("/login")

OR

2. import { redirect } from "react-router-dom";

// Use this

return redirect("/login");

希望這對你有幫助:))