卸载组件时 React Router v4 替换历史记录

IT技术 reactjs react-router react-router-v4
2021-04-07 07:07:48

我有一个具有以下组件的应用程序

|__Base - /home/Base

|__尝试 - /home/Base/:try

|__报告 - /home/Base/:try/report

Base 是用户点击按钮并点击 Try 的起始屏幕，在尝试了一些事情之后，他点击提交，生成报告，其中有一些后端交互，当获取数据时，它会加载报告。

所以我想要的是当用户点击报告页面的后退按钮时，他不应该登陆 Try 页面，而是登陆 Base 页面。

对于工作，我通过react-router文档就去尝试使用history.replace上componentWillUnmount的报告页

this.props.history.replace(`/home/Base`, {
  pathname: `/home/Base`,
  search: null,
  state: {
    isActive: true
  }
}, null);

如果报告页面已完全加载并且我按下后退按钮，它会起作用，但也会调用尝试渲染方法，然后将我带到基础页面，但如果报告未完全加载，我在加载微调器处于加载状态时按下后退按钮在进行中，它仍然会转到基本页面，但也会安装和卸载 TRY 组件。

我在这里遗漏了什么，是什么导致它挂载/卸载或渲染前一个组件，然后加载基本组件，即使我替换了历史堆栈？

1个回答

原因

与此问题相关

React v16，改变路由，在旧路由的componentWillUnmount之前调用新路由的componentWillMount

更新：

解决方案（已勾选，稍后更新在线演示）

使用react-router-last-location获取以前的路径名

import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
import { LastLocationProvider } from 'react-router-last-location';

<BrowserRouter>
  <LastLocationProvider>
    <Switch>
     ...
    </Switch>
  </LastLocationProvider>
</BrowserRouter>

检查以前的路径名componentWillMount，如果它来自某个页面，则推送一个新的路径名以进行路由。

  componentWillMount() {
    const { history, lastLocation } = this.props;
    if (lastLocation?.pathname === '/home/Base/:try/report') {
      history.push({pathname: '/home/Base'});
    }
  }

您可以使用他们提供的 HOC 或自己编写，参考 lib 的源代码以减少依赖

import { withLastLocation } from 'react-router-last-location';

interface Props {
  lastLocation: any,
  history: any,
}

export const YourComponent = withLastLocation(connect(
  ...
))

通过这种方式，您可以在不挂载当前页面的情况下从某些页面重定向所有路由过程，无论您back在浏览器中单击按钮还是单击背面。

你将如何获得if (lastLocation.pathname，请在那里说明一下
2021-06-03 07:07:48
正如我上面提到的，还有像react-router-last-location 这样的库，请随意检查。
2021-06-07 07:07:48
当我同意这个解决方案但只是为了获得最后一个解决方案时，我需要导入一个 51.kb 的库，我不认为这是一个解决方案 .. 这有效但不适用于生产就绪代码，如果我没有任何代码怎么办utiltites 以及我们如何解决这个问题。
2021-06-11 07:07:48
你说得对，而且你仍然可以像这里一样观看那些库的来源，然后在你自己的项目中自己做，这就是我真正的意思，我的意思是这个库提供了围绕它的解决方案，你可以参考。
2021-06-15 07:07:48
上面的答案似乎已经很好地回答了你的问题。如果您需要任何进一步的帮助，请激励我。
2021-06-20 07:07:48
其它你可能感兴趣的问题
上一篇如何在 React 中创建可重用的自定义模态组件？ 下一篇React 可用于服务器端渲染。这意味着什么？