如何在有状态组件中的 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是undefined。

这是我对 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);

这是参考文章。希望它可以帮助您节省时间。

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);

Answer 2

这是您可以使用this.props.history.push('/...')基于类的组件和history.push("/...")使用钩子导航到其他组件的方式。

为了更好地理解，请参阅官方文档。

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  </Router>
);
const About = () => (
  <div>
    <h2>About</h2>
  </div>
);
class Home extends React.Component {
  handleClick = e => {
    this.props.history.push("/about");
  };
  render() {
    return (
      <div>
        <h2>Home</h2>

        <button onClick={this.handleClick}>Click to navigate about page</button>
      </div>
    );
  }
}

现场演示