页面刷新问题

Question

我已经使用react构建了一个管理面板。登录到面板后，每当用户刷新页面时，一切都会消失，我不知道为什么会发生这种情况。它在没有签名页面的情况下运行良好，但添加了签名页面后就不行了。这是定义所有路由的App.js文件代码。

import React, { useState } from "react";
import { Route, Switch } from "react-router-dom";
import { Link } from "react-router-dom";
import * as FaIcons from "react-icons/fa";
import SideMenu from "./SideMenu";
import Dashboard from "./components/Dashboard";
import Registration_Request from "./components/Registration_Request";
import Users from "./components/Users";
import Seller from "./components/Request Pages/Seller";
import Reseller from "./components/Request Pages/Reseller";
import Sales from "./components/Request Pages/Sales";
import Sellers from "./components/Sellers";
import Character_Upload from "./components/Character_Upload";
import Campaign_Design from "./components/Campaign_Design";
import Levels_Design from "./components/Levels_Design";
import SellingCoins from "./components/SellingCoins";
import SignIn from "./SignIn";
function App() {
let [signedIn, isSignedIn] = useState(false);
return (
<>
<div className="header"></div>
<div className="main-content">
<Switch>
<Route path="/" exact>
<SignIn signedIn={signedIn} isSignedIn={isSignedIn} />
</Route>
{signedIn && (
<>
<SideMenu />
<Route path="/dashboard" exact component={Dashboard} />
<Route path="/registration-request/seller" component={Seller} />
<Route
path="/registration-request/reseller"
component={Reseller}
/>
<Route path="/registration-request/sales" component={Sales} />
<Route path="/users" component={Users} />
<Route path="/sellers" component={Sellers} />
<Route path="/character-upload" component={Character_Upload} />
<Route path="/campaign-design" component={Campaign_Design} />
<Route path="/levels-design" component={Levels_Design} />
<Route path="/sellingcoins" component={SellingCoins} />
</>
)}
</Switch>
</div>
</>
);
}
export default App;

Answer 1

signedIn状态只存在于内存中，初始值为false。当您重新加载页面时，您将重新加载应用程序，该应用程序将重新加载/重新初始化组件。

解决方案通常是将应用程序状态持久化到本地存储，并从本地存储进行初始化。

使用状态惰性初始化器函数，您可以读取保存状态的localStorage并设置初始状态。

const [signedIn, isSignedIn] = useState(() => {
return !!JSON.parse(localStorage.getItem("signedIn"));
});

使用useEffect挂钩将状态更改持久化到localStorage。当用户登录并且signedIn状态更新时，这将触发useEffect钩子的回调，并将状态值保存到localStorage中。

useEffect(() => {
localStorage.setItem("signedIn", JSON.stringify(signedIn));
}, [signedIn]);

Answer 2

页面刷新时signedIn标志将设置为false。不要在状态变量中使用它，而是使用本地存储/会话存储。

你可以阅读更多关于本地存储的信息