如何获取react路由器v4的历史记录？

Question

我在从React路由器v3迁移到v4时遇到了一些小问题。在v3中，我可以在任何地方执行此操作：

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

如何在v4中实现这一点。

我知道，当您在组件中时，我可以使用hocwith router、react context或event router道具。但我不是这样。

我正在寻找v4中组件的外部导航的等价性

Answer 1

基于这个答案，如果你只需要历史对象以便导航到其他组件：

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

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

Answer 2

这管用！https://reacttraining.com/react-router/web/api/withRouter

import { withRouter } from 'react-router-dom';

class MyComponent extends React.Component {
  render () {
    this.props.history;
  }
}

withRouter(MyComponent);

Answer 3

您只需要有一个导出历史对象的模块。然后在整个项目中导入该对象。

// history.js
import { createBrowserHistory } from 'history'

export default createBrowserHistory({
  /* pass a configuration object here if needed */
})

然后，您将使用，而不是使用内置路由器之一

// index.js
import { Router } from 'react-router-dom'
import history from './history'
import App from './App'

ReactDOM.render((
  <Router history={history}>
    <App />
  </Router>
), holder)

// some-other-file.js
import history from './history'
history.push('/go-here')