如何刷新整个反应应用程序并保存缓存答案

【问题标题】：How can I refresh the whole react application and saving cached如何刷新整个反应应用程序并保存缓存
【发布时间】：2022-11-10 16:22:11
【问题描述】：

我创建了 mern stack react 应用程序，使用 nodejs 和 express 作为服务器。我想从服务器接收带有 jwt 令牌的 cookie，然后完全刷新整个页面并保存 cookie。我尝试使用 window.location.reload(false) 和 useHistory.get(0) 刷新页面，但它们都无休止地刷新页面，直到我删除令牌然后它停止刷新。我还尝试在 window.location.reload(false) 之后立即编写 window.stop() 但它根本没有刷新窗口。我如何只刷新整个窗口一次？

值得一提的是，我没有太多的 react 经验，所以我非常感谢你的帮助。谢谢你。

【问题讨论】：

标签： node.js reactjs express redux hook

【解决方案1】：

React 不喜欢你自己刷新页面。它更喜欢自己处理。使用useState 挂钩将在状态更改时自动刷新页面，但您也可以使用useEffect 挂钩更改值而不会导致重新渲染。

所以你可能想要做的是获取cookie，然后使用你创建的setState，值的变化将导致刷新，同时也存储cookie。

【讨论】：

嘿，谢谢！问题是我想渲染一个导航栏，它是我存储在我的 app.js 文件中的导航栏，因此它出现在每个页面中，但它与我的登录页面没有直接关系，因此我会喜欢重新渲染 whoe 页面，这样当我收到 cookie 时，我的导航栏外观也会发生变化。你有什么解决办法吗？

【解决方案2】：

如果你想让导航栏和页面基于登录而改变，你可以切换页面。所以有一个页面，您可以使用一个导航栏登录，然后在登录时更改页面。

下面是一个在页面之间切换的简单方法的示例：

import {useState} from 'react';
import ReactDOM from 'react-dom/client';

function Index() {
  const [login, setLogin] = useState(false)
  if (login) {
    return (
      <div >
        <h1> Logged in ! </h1> 
      </div>
    )
  } else {
    return (
      <div >
        <button onClick={() => {
          setLogin(true);
        }>Login</button>
      </div>
    )
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( <Index/> );

这会在交换时重新呈现页面上的所有内容

不过，最好以这样的格式执行此操作： w3Schools Example with router

【讨论】：