使用反应性路由器以编程方式导航

Question

使用反应性路由器以编程方式导航带着react-router我可以用Link元素创建本机由Reaction路由器处理的链接。我看到内部呼叫this.context.transitionTo(...).我想做一个导航，但不是从一个链接，从下拉选择例如。我怎样才能用代码做到这一点呢？是什么this.context?我看到了Navigation混音，但我不需要混音就能做到这一点吗？

Answer 1

Reaction-路由器4.0.0+回答

在4.0及以上版本中，使用历史记录作为组件的支柱。

class Example extends React.Component {
   // use `this.props.history.push('/some/path')` here};

注意：如果您的组件没有由<Route>..你应该用<Route path="..." component={YourComponent}/>拥有这个。历史在你的成分中。

Reaction-路由器3.0.0+回答

在3.0及以上版本中，使用路由器作为组件的支柱。

class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here};

Reaction-路由器2.4.0+回答

在2.4及以上版本中，使用高阶组件将路由器作为组件的支柱。

import { withRouter } from 'react-router';class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here};// Export the decorated classvar DecoratedExample = withRouter(Example);
   // PropTypesExample.propTypes = {
  router: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired  }).isRequired};

Reaction-路由器2.0.0+回答

此版本与1.x向后兼容，因此不需要升级指南。只看一遍这些例子就足够了。

也就是说，如果您希望切换到新的模式，路由器内有一个浏览器历史模块，您可以使用该模块访问

import { browserHistory } from 'react-router'

现在您可以访问您的浏览器历史记录，这样您就可以进行推送、替换等操作.比如：

browserHistory.push('/some/path')

进一步读：历史和通航

---

Reaction-路由器1.x.x回答

我将不谈升级细节。你可以在升级指南

这里问题的主要变化是从导航混合到历史的变化。现在它使用浏览器历史性API来改变路由，所以我们将使用pushState()而今而后。

下面是一个使用MIXIN的例子：

var Example = React.createClass({
  mixins: [ History ],
  navigateToHelpPage () {
    this.history.pushState(null, `/help`);
  }})

注意这个History来自牢骚满腹/历史项目。不是反应-路由器本身。

如果出于某些原因(可能因为ES6类)而不想使用MIXIN，那么您可以访问从路由器获得的历史记录。this.props.history..它将只能访问由您的路由器呈现的组件。因此，如果要在任何子组件中使用它，则需要通过props.

您可以在1.0.x文件

这是一个专门关于在组件外部导航的帮助页面。

它建议获取一个参考history = createHistory()打电话replaceState在那上面。

Reaction-路由器0.13.x回答

我也遇到了同样的问题，只能用Reaction路由器附带的导航混合器找到解决方案。

我就是这么做的

import React from 'react';import {Navigation} from 'react-router';let Authentication = React.createClass({
  mixins: [Navigation],

  handleClick(e) {
    e.preventDefault();

    this.transitionTo('/');
  },

  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }});

我能打电话transitionTo()不需要访问.context

或者你可以试试漂亮的ES6class

import React from 'react';export default class Authentication extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();

    this.context.router.transitionTo('/');
  }

  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }}Authentication.contextTypes = {
  router: React.PropTypes.func.isRequired};

Reaction-路由器-Redux

注：如果您正在使用Redux，则有另一个项目名为Reaction-路由器-Redux这为您提供了React路由器的Redux绑定，使用的方法与反应-剩余是吗？

Reactive-R外层-Redux有几个可用的方法，允许从内部操作创建者进行简单的导航。这对于那些在Rep本机中具有现有体系结构的人来说尤其有用，他们希望在最低限度的样板开销的情况下利用ReactiveWeb中相同的模式。

探索以下方法：

• push(location)

• replace(location)

• go(number)

• goBack()

• goForward()

下面是一个示例用法杜克:

./actioncreators.js

import { goBack } from 'react-router-redux'export const onBackPress = () => (dispatch) => dispatch(goBack())

./viewComponent.js

<button
  disabled={submitting}
  className="cancel_button"
  onClick={(e) => {
    e.preventDefault()
    this.props.onBackPress()
  }}>
  CANCEL</button>

Answer 2

反应-路由器v2

最近的版本(v2.0.0-rc5)，推荐的导航方法是直接推到历史单例上。您可以在在组件文档外部导航.

有关摘录：

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

如果使用更新的反应性路由器api，则需要使用history从…this.props当组件在内部时，所以：

this.props.history.push('/some/path');

它也提供pushState但是，对于记录在案的警告来说，这是不可取的。

如果使用react-router-redux，它提供了一个push函数，您可以这样分派：

import { push } from 'react-router-redux';this.props.dispatch(push('/some/path'));

但是，这可能只用于更改URL，而不是实际导航到页面。