卸载组件时 React Router v4 替换历史记录 [英] React Router v4 replace history when component is unmounted

问题描述

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

I have a app which has the Following Components

|__Base -/home/Base

|__Base - /home/Base

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

|__Try - /home/Base/:try

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

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

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

Base is the Starting screen where the user hits a button and clicks on Try and after trying some things he hits submits which generates reports which has some back end interactions and when the data is fetched it loads the Reports.

所以我想要的是，当用户从报告页面点击后退按钮时，他不应该在尝试页面上，而是在基本页面上.

So what i want is when the user hits the back button from the Reports Page he should not land on the Try page but on the Base page .

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

For that to work i went through the react router documentation and was trying to use history.replace on componentWillUnmount for Reports Page

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

如果报告页面已完全加载并且我按下后退按钮，它会起作用，但也会调用尝试渲染方法，然后将我带到基本页面，但是如果报告未完全加载，我按下后退按钮，而正在加载微调器，它仍然会转到基本页面，但还会安装和卸载 TRY 组件.

In case the Report Page is FullyLoaded and i press the back button it works but calls the Try Render Method too and then takes me to the Base Page , But in case of Reports Not fully Loaded and i press the back button while the loading spinner is in progress it goes to base page still but also mounts and unmounts the TRY component.

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

What am i missing here , what causes it to mount/unmount or render the previous component and then load the base component even though i replace the history stack ?

推荐答案

原因

与此相关问题

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

React v16, changing routes, componentWillMount of the new route is called before componentWillUnmount of the old route

更新:

使用 react-router-last-location 获取上一个路径名

Use react-router-last-location to get previous pathname

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

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

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

Check previous pathname in componentWillMount, if it's from certain page, push a new pathname to route.

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

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

You can use the HOC they provide or write it yourself refer to the lib's source to reduce the dependencies

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

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

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

这样你就可以在不挂载当前页面的情况下重定向某些页面的所有路由过程，无论你点击了back按钮还是在浏览器中点击了后退.

In this way you can redirect all the routing process from certain pages without mount current page, no matter you clicked a back button or clicked the back in your browser.

这篇关于卸载组件时 React Router v4 替换历史记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！