如何在不使用 react-router 的情况下知道刷新页面之前正在渲染哪个组件？

Question

基本上，我想要做的是在页面刷新时呈现与刷新页面时呈现的相同组件。如何获取正在渲染的组件的名称。另外，我还没有在项目中的任何地方使用 react-router。没有 react-router 是否可以做我要求的事情？

我使用 onbeforeunload 事件来检测页面刷新。现在我应该在它的函数中做什么来渲染相同的组件？ 此代码在我的 app.js 组件的 componentDidMount() 中

window.onbeforeunload = function(e) { e.preventDefault()
  return console.log('Hello123')
};

这是在控制台中记录 Hello123。唯一的问题是获取最后呈现的组件的名称。有什么方法可以让应用记住最后渲染的组件的名称，刷新后检查是否有名称，如果有则渲染该组件。

例如，假设我正在渲染一个名为 TravellerList 的组件，并且在单击按钮时我正在渲染名为 AddTraveller 的组件。现在如何获取正在渲染的组件的名称并将其存储在变量中 不使用 react-router ？

Answer 1

如果您想在页面刷新后获取值，我认为您必须使用本地存储或 Cookie，因为在页面刷新后，JavaScript 中的所有对象都会被刷新。您可以做的是创建一个本地存储或 cookie 对象，就像在最高级别组件中一样。

var myObj = {
        component1Rendered:false,
        component2Rendered:false,
        component3Rendered:false,
        component4Rendered:false

    };  

然后在你渲染一些组件时为该对象设置值 举个例子： 在组件 1 在所有组件中的 componentDidMount 内，在渲染时更新该对象。

        componentDidMount() {
        var myObj = {
            component1Rendered:true,
            component2Rendered:false,
            component3Rendered:false,
            component4Rendered:false

        };

            localStorage.setItem('storeObj', JSON.stringify(myObj));
        // please not that this is a sample set statement in your scenario update only the specific value of that object in local-storage 
       }

页面刷新发生后，检查本地存储对象，找到之前使用您的函数渲染过的组件，

window.onbeforeunload = function(e) { e.preventDefault()
  return console.log('Hello123')
 storeObj = localStorage.getItem('storeObj');
// Filter storeObj and get the rendered components
};

Answer 2

你可以试试这个

  componentDidMount() {
      window.addEventListener('beforeunload', this.onBeforeUnload);
  }
  componentWillUnmount() {
    window.removeEventListener('beforeunload', this.onBeforeUnload);

  }
  onBeforeUnload = (e) => {
    const msg = 'Do you want to leave this site?\n\nChanges you made may not be saved.';
    e.returnValue = msg;
    return msg;
  }

你需要反应路由器。检查这个React Router - Stay at the same page after refresh