使用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 {withRouter} from 'react-router';class App extends React.Component {
     ...
     componenDidMount() {
        // get isLoggedIn from localStorage or API call
        if (isLoggedIn) {
             // dispatch an action to change the route
             this.props.history.push('/home');
        }
     }
     render() {
         // return login component
         return <Login />
    }}export default withRouter(App);

重要注记

如果你用withRouter若要防止更新被shouldComponentUpdate，重要的是withRouter包装实现shouldComponentUpdate..例如，在使用Redux时：

/这到处都是shouldComponentUpdate

withRouter(connect(...)(MyComponent))

/这不是

connect(...)(withRouter(MyComponent))

或者你可以用重定向

import {withRouter} from 'react-router';class App extends React.Component {
     ...
     render() {
         if(isLoggedIn) {
              return <Redirect to="/home"/>
         }
         // return login component
         return <Login />
    }}

带着react-router v2 or react-router v3，你可以利用context动态更改路由，如

class App extends React.Component {
     ...
     render() {
         if (isLoggedIn) {
             // dispatch an action to change the route
             this.context.router.push('/home');
         }
         // return login component
         return <Login />
    }}App.contextTypes = {
    router: React.PropTypes.object.isRequired}export default App;

或使用

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