Как использовать Router в React-Context?

Question

Как войти и остаться на той же странице после refre sh в reactjs, я через этот сайт go начал разработку небольшого проекта https://www.freecodecamp.org/news/state-management-with-react-hooks/

при успешном входе в систему введите тип входа, но я обнаружил одну проблему, если мы обновим sh страницу после входа в дом, то она вернется к старой странице, т.е. <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

Когда вы обновляете sh страницу, она снова запускает весь код js. Поэтому при каждом обновлении sh вы инициализируете свой магазин пустым начальным состоянием, где user=null и token=null.

Для сохранения через refre sh вы должны вывести 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,
 };
}