反应 – 在React-Router v4中编程

这是一个问题.我等不及,我跳入使用最新的alpha版本的react-router v4.全新的< BrowserRouter />保持您的UI与浏览器历史记录保持同步,但是如何使用它来编程？

过去,您可能已经使用browserHistory来推送新的路径.这将不适用于反应路由器v4.相反,您可以使用React的上下文和路由器的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只是可用的路由器方法之一.路由器对象还包含blockTransitions(getPromptMessage),createHref(to)和replaceWith(loc),值得检查.

这是official react-router tutorial提到上面的方法.
如果您想了解更多关于使用反应的上下文,请查看docs.