我的react应用程序使用useContext来存储登录和用户信息，但如果我通过更改URL进行导航，所有信息都会丢失，一

Question

import Home from "./pages/home/Home";
import Profile from "./pages/profile/Profile";
import Login from "./pages/login/Login";
import Register from "./pages/register/Register";
import Messenger from "./pages/messenger/Messenger";
import {
BrowserRouter as Router,
Switch,
Route,
Redirect,
} from "react-router-dom";
import { useContext } from "react";
import { AuthContext } from "./context/AuthContext";
function App() {
const { user } = useContext(AuthContext);
console.log(user);
return (
<Router>
<Switch>
<Route exact path="/">
{user ? <Home /> : <Register />}
</Route>
<Route path="/login">{user ? <Redirect to="/" /> : <Login />}</Route>
<Route path="/register">
{user ? <Redirect to="/" /> : <Register />}
</Route>
<Route path="/messenger">
{!user ? <Redirect to="/" /> : <Messenger />}
</Route>
<Route path="/profile/:username">
{!user ? <Redirect to="/" /> : <Profile />}
</Route>
<Route path="*">
{user ? <Profile /> : "404 ERROR: Page does not exists"}
</Route>
</Switch>
</Router>
);
}
export default App;

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { AuthContextProvider } from "./context/AuthContext";
ReactDOM.render(
<React.StrictMode>
<AuthContextProvider>
<App />
</AuthContextProvider>
</React.StrictMode>,
document.getElementById("root")
);

这就是我的应用程序文件的样子。不确定为什么通过URL导航应用程序会导致应用程序始终重置。

例如，该应用程序确实有一个小部件，当单击该小部件时，它会将用户重定向到其他人的个人资料。但是，如果我使用URL导航到那个人的个人资料，一切都会重置

Answer 1

React Context在直接导航到URL时不会持久存在。

React Router处理应用程序中的URL更改，但直接更改URL是在告诉浏览器再次加载页面。如果页面直接登录，您的应用程序将需要处理获取所需数据和重新填充React Context。

这通常包括确认用户已登录(根据您的身份验证方法，通常在cookie中进行排序(，然后获取页面所需的任何数据。

有一些方法可以在会话之间持久化数据，但如果可能的话，应该避免这种情况。我们如何在react 中跨多个选项卡(页面(使用相同的状态