时间戳

首页 > 解决方案 > 我的反应应用程序使用 useContext 来存储登录名和用户信息，但是如果我通过更改 URL 进行导航，所有信息都会丢失并且一切都会重置

reactjs - 我的反应应用程序使用 useContext 来存储登录名和用户信息，但是如果我通过更改 URL 进行导航，所有信息都会丢失并且一切都会重置

问题描述

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 导航到该人的个人资料，一切都会重置

标签： reactjsuse-context

解决方案

当直接导航到 URL 时，React Context 不会持续存在。

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

这通常涉及确认用户已登录（取决于您的身份验证方法，这通常在 cookie 中排序），然后获取页面所需的任何数据。

有一些方法可以在会话之间保存数据，但如果可能的话应该避免这种情况。我们如何在反应中跨多个标签（页面）使用相同的状态

推荐阅读