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

Question

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

|__Base - /home/Base

|__Try - /home/Base/:try

|__Report - /home/Base/:try/report

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

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

为此，我浏览了反应路由器文档，并尝试在 componentWillUnmount 上使用 history.replace 报告页面

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

如果报告页面已完全加载并且我按下后退按钮它可以工作，但也会调用 Try Render 方法，然后将我带到基本页面，但如果报告未完全加载并且我按下后退按钮而正在加载微调器，它仍然会进入基本页面，但也会安装和卸载 TRY 组件。

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

Answer 1

原因

与此issue相关

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

更新：

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

使用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 按钮还是点击浏览器中的后退，您都可以从特定页面重定向所有路由过程，而无需挂载当前页面。