反应 – 在React-Router v4中编程

发布时间：2020-12-15 20:51:41 所属栏目：百科来源：网络整理

导读：这是一个问题.我等不及,我跳入使用最新的alpha版本的react-router v4.全新的 BrowserRouter /保持您的UI与浏览器历史记录保持同步,但是如何使用它来编程？过去,您可能已经使用browserHistory来推送新的路径.这将不适用于反应路由器v4.相反,您可以使用React

这是一个问题.我等不及,我跳入使用最新的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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!