如何在 React-Context 中使用路由器？

Question

如何在reactjs中刷新后登录并停留在同一页面，我正在浏览这个网站并开始开发一个小项目https://www.freecodecamp.org/news/state-management-with-react-hooks/

成功登录后发送类型登录，但我发现一个问题，如果我们在进入主页后刷新页面，它会返回旧页面，即<Login /> 不要留在<Home />

我认为我需要将它包装在路由器中，因为我是初学者并且正在学习 reactjs，我无法做到这一点

import React from "react";
import "./App.css";
import Login from "./components/Login";
import Home from "./components/Home";
import Header from "./components/Header";
export const AuthContext = React.createContext();
const initialState = {
  isAuthenticated: false,
  user: null,
  token: null,
};
const reducer = (state, action) => {
  switch (action.type) {
    case "LOGIN":
      localStorage.setItem("user", JSON.stringify(action.payload.user));
      localStorage.setItem("token", JSON.stringify(action.payload.token));
      return {
        ...state,
        isAuthenticated: true,
        user: action.payload.user,
        token: action.payload.token
      };
    case "LOGOUT":
      localStorage.clear();
      return {
        ...state,
        isAuthenticated: false,
        user: null
      };
    default:
      return state;
  }
};
function App() {
  const [state, dispatch] = React.useReducer(reducer, initialState);
return (
    <AuthContext.Provider
      value={{
        state,
        dispatch
      }}
    >
      <div className="App">{!state.isAuthenticated ? <Login /> : <Home />}</div>
    </AuthContext.Provider>
  );
}
export default App;

Answer 1

当您刷新页面时，它会再次运行所有 js 代码。因此，每次刷新都会使用 user=null 和 token=null 的空初始状态来初始化存储。

为了在刷新过程中保持不变，您必须将 user 和 token 从本地存储中取出，并将其用作您的初始状态（如果它们存在）。

这是一个不处理错误或无效令牌的简单解决方案：

function getInitialState() {
 const token = localStorage.getItem("token")
 const user = localStorage.getItem("user")

 if (token && user) {
  return {
   isAuthenticated: true,
   user,
   token
  }
 };

 return {
  isAuthenticated: false,
  user: null,
  token: null,
 };
}