Question

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

| __Base-/ home / Base

| __Try-/ home / Base /：try

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

Base是“开始”屏幕，在该屏幕上，用户单击按钮并单击“尝试”，在尝试了某些操作后，他将提交并生成报告，该报告具有一些后端交互作用，并且在提取数据时将加载报告。

所以我想要的是，当用户单击“报告”页面上的“后退”按钮时，他不应该进入“尝试”页面，而应该进入“基本”页面。

为此，我浏览了React Router文档，并尝试在history.replace上的componentWillUnmount上使用“报告”页面

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

如果“报告页面”已满载，并且我按“后退”按钮，它也可以工作，但也会调用“尝试渲染方法”，然后将我带到“基本页面”，但是如果“报告”未完全加载，则在正在加载微调器，它仍会转到基本页面，还会挂载和卸载TRY组件。

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

Answer 1

原因

与此issue

有关

反应v16，更改路由，在旧路由的componentWillUnmount之前调用新路由的componentWillMount

更新：

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

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

instance Data a => Data (Maybe a)

检查import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'; import { LastLocationProvider } from 'react-router-last-location'; <BrowserRouter> <LastLocationProvider> <Switch> ... </Switch> </LastLocationProvider> </BrowserRouter>中的先前路径名，如果它来自特定页面，则按新路径名进行路由。

componentWillMount

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

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

通过这种方式，无论您单击import { withLastLocation } from 'react-router-last-location'; interface Props { lastLocation: any, history: any, } export const YourComponent = withLastLocation(connect( ... ))按钮还是在浏览器中单击后退页面，都可以从某些页面重定向所有路由过程，而无需安装当前页面。

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

1 个答案:

原因

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