我刚刚把react-router从v3替换为v4。 但我不确定如何以编程方式在组件的成员函数中导航。 即在handleClick()函数中,我想在处理一些数据后导航到/path/some/where。 我以前是这样做的:

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

但是我在v4中找不到这样的界面。 如何使用v4导航?


当前回答

如此:

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

const SomeComponent = withRouter(({ history }) => (
    <div onClick={() => history.push('/path/some/where')}>
        some clickable element
    </div>); 
);

export default SomeComponent;

其他回答

我在迁移到React-Router v4时遇到了类似的问题,因此我将在下面解释我的解决方案。

请不要认为这个答案是解决问题的正确方法,我想随着React Router v4变得更加成熟并离开beta版,很有可能会出现更好的答案(它甚至可能已经存在,只是我没有发现它)。

就上下文而言,我遇到了这个问题,因为我偶尔使用Redux-Saga以编程方式更改历史对象(例如当用户成功验证时)。

在React Router文档中,看一下<Router>组件,你可以看到你有能力通过道具传递自己的历史对象。这是解决方案的本质——我们从全局模块向React-Router提供历史对象。

步骤:

Install the history npm module - yarn add history or npm install history --save create a file called history.js in your App.js level folder (this was my preference) // src/history.js import createHistory from 'history/createBrowserHistory'; export default createHistory();` Add this history object to your Router component like so // src/App.js import history from '../your/path/to/history.js;' <Router history={history}> // Route tags here </Router> Adjust the URL just like before by importing your global history object: import history from '../your/path/to/history.js;' history.push('new/path/here/');

现在所有内容都应该保持同步,您还可以通过编程方式设置历史对象,而不是通过组件/容器。

我认为@rgommezz涵盖了大多数情况,除了一个我认为非常重要的情况。

// history is already a dependency or React Router, but if don't have it then try npm install save-dev history

import createHistory from "history/createBrowserHistory"

// in your function then call add the below 
const history = createHistory();
// Use push, replace, and go to navigate around.
history.push("/home");

这允许我写一个简单的服务与动作/调用,我可以调用从任何组件做导航,而不需要在我的组件上做很多HoC…

目前还不清楚为什么以前没有人提供这种解决方案。我希望它能有所帮助,如果你看到任何问题,请告诉我。

因为有时我更喜欢通过应用程序切换路由,然后通过按钮,这是一个最小的工作示例,对我有用:

import { Component } from 'react'
import { BrowserRouter as Router, Link } from 'react-router-dom'

class App extends Component {
  constructor(props) {
    super(props)

    /** @type BrowserRouter */
    this.router = undefined
  }

  async handleSignFormSubmit() {
    await magic()
    this.router.history.push('/')
  }

  render() {
    return (
      <Router ref={ el => this.router = el }>
        <Link to="/signin">Sign in</Link>
        <Route path="/signin" exact={true} render={() => (
          <SignPage onFormSubmit={ this.handleSignFormSubmit } />
        )} />
      </Router>
    )
  }
}

如此:

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

const SomeComponent = withRouter(({ history }) => (
    <div onClick={() => history.push('/path/some/where')}>
        some clickable element
    </div>); 
);

export default SomeComponent;

你也可以简单地使用props来访问历史对象: