react子页面浏览器刷新后返回上一级页面

1、问题背景

在项目中有页面A和它的下一级页面B，数据在页面A渲染时全部获取，再根据条件将数据切割好传入页面B，但是在页面B浏览器刷新时数据消失，希望可以实现在浏览器刷新时返回页面A。

2、实现思路

2.1使用localStorage API将页面A路由存储在本地存储中

localStorage.setItem('careScheduleDetailRoute', JSON.stringify({ pathname: '/StaffManagement/CareScheduleManagement' }));

2.2页面重新加载时，componentDidMount（）中调用router.push实现跳转

第一次进入页面B时，savedRoute为空不发生跳转，在点击浏览器刷新时，页面重新加载再次调用componentDidMount，此时saveRoute不为空，路由实现跳转。注意，组件即将被卸载时调用componentWillUnMount，将本地存储中页面A的路由移除。

componentWillUnmount() {
  localStorage.removeItem('careScheduleDetailRoute');
}

  componentDidMount() {
    const savedRoute = localStorage.getItem('careScheduleDetailRoute');
    console.log(savedRoute)
    if (savedRoute) {
        const location = JSON.parse(savedRoute);
        router.push(location.pathname);

    }

    localStorage.setItem('careScheduleDetailRoute', JSON.stringify({ pathname: '/StaffManagement/CareScheduleManagement' }));
   
 }

2.3刷新时将页面B关闭

通过上述代码实现了页面跳转，但是页面B仍然存在并且没有数据，所以跳转的同时将页面B关闭

componentWillUnmount() {
   localStorage.removeItem('careScheduleDetailRoute');
  router.push('/StaffManagement/CareScheduleManagement');
}

  componentDidMount() {
    const savedRoute = localStorage.getItem('careScheduleDetailRoute');
     console.log(savedRoute)
    const element = document.querySelector('div.ant-tabs-tab-active.ant-tabs-tab');
    const tab= element.querySelector('i')
     if (savedRoute) {
       
         tab.click();

    }
    localStorage.setItem('careScheduleDetailRoute', JSON.stringify({ pathname: '/StaffManagement/CareScheduleManagement' }));
}

因为这里是一个标签页，我通过选择器querySelector获取当前激活的标签页的i元素,并模拟点击标签页(通过tab.click())将页面B关闭。