在React中以编程方式导航

我迫不及待地跳上使用最新的alpha版react-router v4。 全新的<BrowserRouter/>在保持用户界面与浏览器历史记录同步方面非常出色，但是如何使用它来以编程方式导航？

---

路由器会将history对象推送到props散列中的组件。 因此，在你的组件中，只需要：

this.props.history.push('/mypath')

这里是一个完整的例子：

在App.js ：

import React from 'react'
import {BrowserRouter as Router, Route} from 'react-router-dom'

import Login from './Login'

export default class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Route exact path='/login' component={Login} />
        </div>
      </Router>
    )
  }
}

在Login.js ：

import React, {PropTypes} from 'react'

export default class Login extends React.Component {
  constructor(props) {
    super(props)
    this.handleLogin = this.handleLogin.bind(this)
  }

  handleLogin(event) {
    event.preventDefault()
    // do some login logic here, and if successful:
    this.props.history.push(`/mypath`)
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleLogin}>
          <input type='submit' value='Login' />
        </form>
      </div>
    )
  }
}

---

在过去，你可能已经使用browserHistory推新路径。 这不适用于react-router v4。 相反，您已经使用了React的context和router的transitionTo方法。

这里有一个简单的例子：

import React from 'react';

class NavigateNext extends React.Component {
  constructor() {
    super();
    this.navigateProgramatically = this.navigateProgramatically.bind(this);
  }

  navigateProgramatically(e) {
    e.preventDefault();

    this.context.router.transitionTo(e.target.href)
  }

  render() {
    return (
      <Link to={"/next-page"}
            onClick={this.navigateProgramatically}
      >Continue</Link>
    );
  }
}

NavigateNext.contextTypes = {
  router: React.PropTypes.object
};

transitionTo只是可用的router方法之一。 router对象还包含值得检查的blockTransitions(getPromptMessage) ， createHref(to)和replaceWith(loc) 。

这里是官方react-router教程，提到上述方法。 如果您想了解更多关于使用react的context请查看文档。

---

我没有足够的评论声望，但是在回答@ singularity的问题时，您必须在组件类的contextTypes静态属性中包含您希望提供的上下文属性。

来自context的React文档：

如果contextTypes没有定义，那么上下文将是一个空对象。

在这种情况下：

class NavigateNext extends React.Component {

  // ...

  static contextTypes = {
    router: PropTypes.object
  }

  // ...

}

与propTypes不同， contextTypes实际上会导致React的行为不同，并且不仅用于类型检查。

链接地址: http://www.djcxy.com/p/52119.html

上一篇: Navigating Programmatically in React

下一篇: reactRouter.withRouter) is not a function when navigating to route programmatically in react