Reactjs 无法在主组件的返回语句中呈现预期组件

您可以使用navigate('/login');以编程方式触发它，而不是使用html导航

Protected.js

import { useNavigate } from "react-router-dom";
import RootLayOut from "./components/layout/RootLayOut";
import { useEffect, useState } from "react";

const Protected = () => {
  let navigate = useNavigate();
  const data = localStorage.getItem("token");
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  //const isAuthenticated = useRef(false);
  useEffect(() => {
    const verifyToken = () => {
      try {
        const response = {ok: false};/* await fetch("http://172.23.30.165:5000/verify_token", {
          headers: { "Content-Type": "application/json" },
          method: "POST",
          body: JSON.stringify(data), // data = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9..."
        }); */
        if (response.ok) {
          const resData = response;
          console.log("In protected" + JSON.stringify(resData));
          if (resData) {
            setIsAuthenticated(true);
            console.log(isAuthenticated);
          } else {
            console.log("user is inauthenticated.");
            setIsAuthenticated(false);
            navigate('/login');
          }
        } else {
          console.log("user is inauthenticated.");
          setIsAuthenticated(false);
          navigate('/login');
        }
      } catch (error) {
        console.error("Error verifying data:", error);
      }
    };
    verifyToken();
  }, [data, isAuthenticated]);

  return <>{isAuthenticated ? <RootLayOut /> : null}</>; // even though the console.log(isAuthenticated) runs
  // and return null, the isAuthenticated variable is still null
  // thus it never runs my <RootLayOut/> component
};

export default Protected;

App.js

import RootLayOut from "./components/layout/RootLayOut.js";
import Sell from "./page/Sell.js";
import Login from "./page/Login/Login.js";
import Register from "./page/Register/Register.js";
import Home from "./page/Home/Home.js";
import "./App.css";
import Market from "./components/Market.js";
import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
  Navigate,
} from "react-router-dom";
import { useState, useEffect } from "react";
import Protected from "./Protected.js";

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route path="/" element={<Protected />}>
        <Route
           exact path="/"
          element={<Navigate to="/home" replace={true} />}
        />
        <Route path="market" element={<Market />} />
        <Route path="sell" element={<Sell />} />
        <Route path="home" element={<Home />} />
        <Route path="logout" element={<div>logout</div>} />
      </Route>
      <Route path="/register" element={<Register />} />
      <Route path="/login" element={<Login />} />

    </>
  )
);

function App() {
  return <RouterProvider router={router} />;
}
export default App;

stackblitz个