Reactjs 在React Router v4中以编程方式导航

我迫不及待地开始使用最新的alpha版本的

react路由器

v4。全新的

在保持用户界面与浏览器历史同步方面非常出色，但是如何使用它以编程方式导航？

在过去，您可能使用

浏览器历史

推送新路径。这不适用于

react路由器

v4。相反，您使用了React的

上下文

和

路由器

的

转换到

方法

下面是一个简单的例子：

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
};

从“React”导入React；
类NavigateText扩展了React.Component{
构造函数（）{
超级（）；
this.navigateProgramagly=this.navigateProgramagly.bind（this）；
}
按程序导航（e）{
e、 预防默认值（）；
this.context.router.transitiono（e.target.href）
}
render（）{
返回(
继续
);
}
}
NavigateText.contextTypes={
路由器：React.PropTypes.object
};

transition

只是可用的

router

方法之一

router

对象还包含

blockTransitions（getPromptMessage）

、

createHref（to）

和

replaceWith（loc）

，这些都值得签出

这里提到了上述方法。

---

如果您想了解更多有关使用

react

的

上下文的信息，请查看。
我没有足够的声誉发表评论，但在回答@singularity的问题时，您必须包括希望在组件类“
contextTypes
静态属性”上提供的上下文属性

发件人：

如果未定义contextTypes，则上下文将是空对象

在这种情况下：

class NavigateNext extends React.Component {

  // ...

  static contextTypes = {
    router: PropTypes.object
  }

  // ...

}

与
propTypes
不同，
contextTypes
实际上会导致React的行为不同，并且不仅仅用于类型检查。
React路由器v4 beta版发布，API略有更改。如果您使用的是最新版本，请使用
this.context.router.transitiono（e.target.href）
Do，而不是
this.context.router.push（e.target.href）

链接到新文档：
我发现使用state、三元运算符和
效果最好。我认为这也是首选的方式，因为它最接近v4的设置方式

在构造函数（）中

在render（）中

希望能有帮助。让我知道。
使用：

import React，{PropTypes}来自“React”
从“react router”导入{withRouter}
//显示当前位置路径名的简单组件
类ShowTheLocation扩展了React.Component{
静态类型={
匹配：PropTypes.object.isRequired，
位置：PropTypes.object.isRequired，
历史记录：PropTypes.object.isRequired
}
render（）{
const{match，location，history}=this.props
返回(
您现在位于{location.pathname}
)
}
}
//创建一个“已连接”的新组件（借用redux
//术语）到路由器。
const ShowTheLocationWithRouter=withRouter（ShowTheLocation）
使用将向您的组件添加路由器属性，然后您可以访问
历史记录
，并像使用v3一样使用
推送
：

从“React”导入React；
从“react router dom”导入{withRouter}；
类形式扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
输入：“”，
};
this.\u submit=this.\u submit.bind（this）；
}
render（）{
返回(
this.setState（{input:event.target.value}）}/>
提交
);
}
_提交（活动）{
event.preventDefault（）；
this.props.history.push（`/theurlyouwanttogo`）；
}
}
使用路由器导出默认值（表格）；
路由器将在
道具
散列中向组件添加一个
历史
对象。因此，在您的组件中，只需执行以下操作：

this.props.history.push（'/mypath'）

以下是一个完整的示例：

在
App.js
中：

从“React”导入React
从“react Router dom”导入{BrowserRouter as Router，Route}
从“./Login”导入登录名
导出默认类App扩展React.Component{
render（）{
返回(
)
}
}

在
Login.js
中：

import React，{PropTypes}来自“React”
导出默认类登录扩展React.Component{
建造师（道具）{
超级（道具）
this.handleLogin=this.handleLogin.bind（this）
}
handleLogin（事件）{
event.preventDefault（）
//在此处执行一些登录逻辑，如果成功：
this.props.history.push（`/mypath`）
}
render（）{
返回(
)
}
}
如果您需要在组件外部的某个位置导航，而该位置无法从组件传入历史对象，类似于您在旧版本中使用browserHistory时所做的操作，则可以执行以下操作

首先创建一个历史模块

History.js：

import createBrowserHistory from 'history/createBrowserHistory'

export default createBrowserHistory();

然后，在声明路由器时，请确保从react Router导入路由器，而不是react Router dom（它只是react Router版本的包装器，但会自动创建历史对象），并传入刚刚创建的历史模块

Root.js（或您执行此操作的任何位置）：

当然，这不是推荐的方法，正如在旧版本中使用browserHistory不是推荐的方法一样，因为服务器端渲染之类的事情不会起作用，但是如果您不关心这一点，这通常是正确的解决方案

这样做的另一个好处是，您可以将history对象扩展为经过解析的查询字符串参数，例如：

import createBrowserHistory from 'history/createBrowserHistory'
import queryString from 'query-string';

const history = createBrowserHistory();

history.location.query = queryString.parse(history.location.search);

history.listen(() => {
  history.location.query = queryString.parse(history.location.search);
});

export default history;

如果您需要访问组件外部的历史记录（例如在redux操作中），react router已发布其原始解决方案

基本上，您必须创建自己的历史对象：

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

并将其传递到您的路由器：

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

ReactDOM.render((
  <Router history={history}> // <<-- the history object
    <App/>
  </Router>
), document.getElementById('root'))

是的
import createBrowserHistory from 'history/createBrowserHistory'

export default createBrowserHistory();

import Router from 'react-router/Router'
import history from './history'

...

class Root extends Component{
  render() {
    return (
      <Router history={history}>
        ...
      </Router>
    );
  }
}

import history from './history';

export default ()=>{
  // redirecting to login page using history without having to pass it in 
  // from a component
  history.replace('/login')
}

import createBrowserHistory from 'history/createBrowserHistory'
import queryString from 'query-string';

const history = createBrowserHistory();

history.location.query = queryString.parse(history.location.search);

history.listen(() => {
  history.location.query = queryString.parse(history.location.search);
});

export default history;

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

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

ReactDOM.render((
  <Router history={history}> // <<-- the history object
    <App/>
  </Router>
), document.getElementById('root'))

import history from './history';

history.push('/home');

window.location='/mypath/';