使用Reaction-路由器以编程方式导航

Question

使用Reaction-路由器以编程方式导航

我正在开发一个应用程序，在这个应用程序中，我检查用户是否不是。loggedIn我必须显示登录表单，否则dispatch阿action这将改变路由并加载其他组件。这是我的代码：

    render() {
         if (isLoggedIn) {
             // dispatch an action to change the route
         }
         // return login component
         <Login />
    }

如何实现这一点，因为我不能在呈现函数中更改状态。

Answer 1

考虑到你在用react-router v4将您的组件与withRouter和使用history.push从道具到改变路线。你需要利用withRouter只有当组件没有接收到Router如果您的组件是由路由器呈现的组件的嵌套子组件，而您还没有将路由器支持传递给它，或者组件根本没有链接到路由器，并且被呈现为一个独立于路由的组件，则可能会发生这种情况。import&nbsp;{withRouter}&nbsp;from&nbsp;'react-router';class&nbsp;App&nbsp;extends&nbsp;React.Component&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;componenDidMount()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;get&nbsp;isLoggedIn&nbsp;from&nbsp;localStorage&nbsp;or&nbsp;API&nbsp;call &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(isLoggedIn)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;dispatch&nbsp;an&nbsp;action&nbsp;to&nbsp;change&nbsp;the&nbsp;route &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.props.history.push('/home'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;return&nbsp;login&nbsp;component &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<Login&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;}}export&nbsp;default&nbsp;withRouter(App);重要注记如果你用withRouter若要防止更新被shouldComponentUpdate，重要的是withRouter包装实现shouldComponentUpdate..例如，在使用Redux时：/这到处都是shouldComponentUpdatewithRouter(connect(...)(MyComponent))/这不是connect(...)(withRouter(MyComponent))或者你可以用重定向import&nbsp;{withRouter}&nbsp;from&nbsp;'react-router';class&nbsp;App&nbsp;extends&nbsp;React.Component&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(isLoggedIn)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<Redirect&nbsp;to="/home"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;return&nbsp;login&nbsp;component &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<Login&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;}}带着react-router v2 or react-router v3，你可以利用context动态更改路由，如class&nbsp;App&nbsp;extends&nbsp;React.Component&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(isLoggedIn)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;dispatch&nbsp;an&nbsp;action&nbsp;to&nbsp;change&nbsp;the&nbsp;route &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.context.router.push('/home'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;return&nbsp;login&nbsp;component &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<Login&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;}}App.contextTypes&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;router:&nbsp;React.PropTypes.object.isRequired}export&nbsp;default&nbsp;App;或使用import&nbsp;{&nbsp;browserHistory&nbsp;}&nbsp;from&nbsp;'react-router';browserHistory.push('/some/path');