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

Question

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

带着react-router我可以用Link元素创建本机由Reaction路由器处理的链接。

我看到内部呼叫this.context.transitionTo(...).

我想做一个导航，但不是从一个链接，从下拉选择例如。我怎样才能用代码做到这一点呢？是什么this.context?

我看到了Navigation混音，但我不需要混音就能做到这一点吗？

Answer 1

Reaction-路由器4.0.0+回答在4.0及以上版本中，使用历史记录作为组件的支柱。class&nbsp;Example&nbsp;extends&nbsp;React.Component&nbsp;{ &nbsp;&nbsp;&nbsp;//&nbsp;use&nbsp;`this.props.history.push('/some/path')`&nbsp;here};注意：如果您的组件没有由<Route>..你应该用<Route path="..." component={YourComponent}/>拥有这个。历史在你的成分中。Reaction-路由器3.0.0+回答在3.0及以上版本中，使用路由器作为组件的支柱。class&nbsp;Example&nbsp;extends&nbsp;React.Component&nbsp;{ &nbsp;&nbsp;&nbsp;//&nbsp;use&nbsp;`this.props.router.push('/some/path')`&nbsp;here};Reaction-路由器2.4.0+回答在2.4及以上版本中，使用高阶组件将路由器作为组件的支柱。import&nbsp;{&nbsp;withRouter&nbsp;}&nbsp;from&nbsp;'react-router';class&nbsp;Example&nbsp;extends&nbsp;React.Component&nbsp;{ &nbsp;&nbsp;&nbsp;//&nbsp;use&nbsp;`this.props.router.push('/some/path')`&nbsp;here};//&nbsp;Export&nbsp;the&nbsp;decorated&nbsp;classvar&nbsp;DecoratedExample&nbsp;=&nbsp;withRouter(Example); &nbsp;&nbsp;&nbsp;//&nbsp;PropTypesExample.propTypes&nbsp;=&nbsp;{ &nbsp;&nbsp;router:&nbsp;React.PropTypes.shape({ &nbsp;&nbsp;&nbsp;&nbsp;push:&nbsp;React.PropTypes.func.isRequired&nbsp;&nbsp;}).isRequired};Reaction-路由器2.0.0+回答此版本与1.x向后兼容，因此不需要升级指南。只看一遍这些例子就足够了。也就是说，如果您希望切换到新的模式，路由器内有一个浏览器历史模块，您可以使用该模块访问import { browserHistory } from 'react-router'现在您可以访问您的浏览器历史记录，这样您就可以进行推送、替换等操作.比如：browserHistory.push('/some/path')进一步读：历史和通航Reaction-路由器1.x.x回答我将不谈升级细节。你可以在升级指南这里问题的主要变化是从导航混合到历史的变化。现在它使用浏览器历史性API来改变路由，所以我们将使用pushState()而今而后。下面是一个使用MIXIN的例子：var&nbsp;Example&nbsp;=&nbsp;React.createClass({ &nbsp;&nbsp;mixins:&nbsp;[&nbsp;History&nbsp;], &nbsp;&nbsp;navigateToHelpPage&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;this.history.pushState(null,&nbsp;`/help`); &nbsp;&nbsp;}})注意这个History来自牢骚满腹/历史项目。不是反应-路由器本身。如果出于某些原因(可能因为ES6类)而不想使用MIXIN，那么您可以访问从路由器获得的历史记录。this.props.history..它将只能访问由您的路由器呈现的组件。因此，如果要在任何子组件中使用它，则需要通过props.您可以在1.0.x文件这是一个专门关于在组件外部导航的帮助页面。它建议获取一个参考history = createHistory()打电话replaceState在那上面。Reaction-路由器0.13.x回答我也遇到了同样的问题，只能用Reaction路由器附带的导航混合器找到解决方案。我就是这么做的import&nbsp;React&nbsp;from&nbsp;'react';import&nbsp;{Navigation}&nbsp;from&nbsp;'react-router';let&nbsp;Authentication&nbsp;=&nbsp;React.createClass({ &nbsp;&nbsp;mixins:&nbsp;[Navigation], &nbsp;&nbsp;handleClick(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault(); &nbsp;&nbsp;&nbsp;&nbsp;this.transitionTo('/'); &nbsp;&nbsp;}, &nbsp;&nbsp;render(){ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(<div&nbsp;onClick={this.handleClick}>Click&nbsp;me!</div>); &nbsp;&nbsp;}});我能打电话transitionTo()不需要访问.context或者你可以试试漂亮的ES6classimport&nbsp;React&nbsp;from&nbsp;'react';export&nbsp;default&nbsp;class&nbsp;Authentication&nbsp;extends&nbsp;React.Component&nbsp;{ &nbsp;&nbsp;constructor(props)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;super(props); &nbsp;&nbsp;&nbsp;&nbsp;this.handleClick&nbsp;=&nbsp;this.handleClick.bind(this); &nbsp;&nbsp;} &nbsp;&nbsp;handleClick(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault(); &nbsp;&nbsp;&nbsp;&nbsp;this.context.router.transitionTo('/'); &nbsp;&nbsp;} &nbsp;&nbsp;render(){ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(<div&nbsp;onClick={this.handleClick}>Click&nbsp;me!</div>); &nbsp;&nbsp;}}Authentication.contextTypes&nbsp;=&nbsp;{ &nbsp;&nbsp;router:&nbsp;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.jsimport&nbsp;{&nbsp;goBack&nbsp;}&nbsp;from&nbsp;'react-router-redux'export&nbsp;const&nbsp;onBackPress&nbsp;=&nbsp;()&nbsp;=>&nbsp;(dispatch)&nbsp;=>&nbsp;dispatch(goBack())./viewComponent.js<button &nbsp;&nbsp;disabled={submitting} &nbsp;&nbsp;className="cancel_button" &nbsp;&nbsp;onClick={(e)&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault() &nbsp;&nbsp;&nbsp;&nbsp;this.props.onBackPress() &nbsp;&nbsp;}}> &nbsp;&nbsp;CANCEL</button>

Answer 2

反应-路由器v2最近的版本(v2.0.0-rc5)，推荐的导航方法是直接推到历史单例上。您可以在在组件文档外部导航.有关摘录：import&nbsp;{&nbsp;browserHistory&nbsp;}&nbsp;from&nbsp;'react-router';browserHistory.push('/some/path');如果使用更新的反应性路由器api，则需要使用history从…this.props当组件在内部时，所以：this.props.history.push('/some/path');它也提供pushState但是，对于记录在案的警告来说，这是不可取的。如果使用react-router-redux，它提供了一个push函数，您可以这样分派：import&nbsp;{&nbsp;push&nbsp;}&nbsp;from&nbsp;'react-router-redux';this.props.dispatch(push('/some/path'));但是，这可能只用于更改URL，而不是实际导航到页面。