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

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或者你可以试试漂亮的ES6classimport 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.jsimport { 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>

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

3回答