以编程方式使用react-router进行导航

Question

我正在开发中,我检查,如果用户不是一个应用程序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道具时才需要使用,当组件是由路由器呈现的组件的嵌套子级并且您没有将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');

Answer 2

在react-router版本4中：

import React from 'react'
import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom'

const Example = () => (

  if (isLoggedIn) {
    <OtherComponent />

  } else {

    <Router>
      <Redirect push to="/login" />
      <Route path="/login" component={Login}/>
    </Router>

  }
)

const Login = () => (
    <h1>Form Components</h1>
    ...
)

export default Example;