reactjs - 如何在有状态组件的 React Router 5.1.2 中使用 History.push ('path' )？

Question

如何在有状态组件(类组件)的React Router 5.1.2中使用history.push('path')？

我找到了这个，但它是无状态组件的解决方案。

import { useHistory } from "react-router-dom";

function App() {
  let history = useHistory();
}

Answer 1

我在使用 React Router v5 时遇到了同样的问题。当尝试在下面以编程方式更改路线时，

this.props.history.push({
    pathname: `/target-path`,
    state: variable_to_transfer
});

this.props.history 未定义。

这是我的 React Router v5 解决方案。

import React, { Component } from "react";
import { withRouter } from 'react-router-dom';

class MyClass extends Component {
    routingFunction = (param) => {
        this.props.history.push({
            pathname: `/target-path`,
            state: param
        });
    }
    ...
}
export default withRouter(MyClass);

这里是reference article 。希望它能帮助您节省时间。

更新Next.js
您应该使用 Next.js 中“next/router”中的 withRouter。

import React, { Component } from "react";
import { withRouter } from 'react-router-dom';

class MyClass extends Component {
  routingFunction = (param) => {
     this.props.router.push('/dashboard');
  }
  ...
}
export default withRouter(MyClass);