本地存储的事件监听器无法通过反应代码工作

Question

我从登录 api 获得了一个令牌，我已将其设置为本地存储，并且在 app.js 文件中我有一个条件，如下面的代码

import { useEffect, useState } from "react";
import "./App.css";
import Home from "./Component/Home";
import Login from "./Component/Login";
import { Routes, Route, BrowserRouter } from "react-router-dom";

function App() {

  const [token, setToken]= useState(!!localStorage.getItem('token'));
  
  const handleStorageChange = () => {
      const newToken = !!localStorage.getItem('token');
      setToken(newToken);
    };

  useEffect(() => {
    window.addEventListener('storage', handleStorageChange);
    return () => {
      window.removeEventListener('storage', handleStorageChange);
    };
  }, []);

  return (
    <BrowserRouter>
      <Routes>
        {token ?(
          <Route path="/" element={<Home />} />
        ) : (
          <Route path="/" element={<Login />} />
        )}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

当本地存储中存在令牌值时，我们需要重定向到 home 组件。

这就是我登录用户的方式

const handleSubmit = (e) => {
    e.preventDefault();

    axios
      .post("AUTH_API", {
        username : username,
        password : pass,
      })
      .then((res) => {
        console.log(res.data)
        localStorage.setItem("token",res.data.token);
      })
      .catch(function (error) {
        console.log(error);
        toast("Please Enter Valid Details!");
      });
  };

Answer 1

您可以通过使用 useNavigate() 钩子来简化操作，在 api 成功响应后将令牌存储在 localStorage 中并使用 useNavigate 重定向到主页。您应该仅使用 app.js 来配置路由器。不要设置任何条件来使其变得简单。

您可以参考这里