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

Question

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

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

我如何实现这一点，因为我无法更改 render 函数内的状态。

原文由 Gaurav Mehta 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

考虑到您正在使用 react-router v4

将你的组件与 withRouter 一起使用，并使用 history.push 从道具来改变路线。您需要使用 withRouter 只有当您的组件没有收到 Router 道具时，这可能发生在您的组件是路由器呈现的组件的嵌套子组件的情况下您还没有将 Router props 传递给它，或者当组件根本没有链接到 Router 并且呈现为与 Routes 分开的单独组件时。

 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);

重要的提示

If you are using withRouter to prevent updates from being blocked by shouldComponentUpdate , it is important that withRouter wraps the component that implements shouldComponentUpdate .例如，当使用 Redux 时：

// 这绕过了 shouldComponentUpdate

>  withRouter(connect(...)(MyComponent))
>
> ```
>
> // 这不
>
> ```
> connect(...)(withRouter(MyComponent))
>
> ```

或者你可以使用重定向

import {withRouter} from ‘react-router’;

class App extends React.Component { … render() { if(isLoggedIn) { return } // return login component return } }

使用 `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 } }

App.contextTypes = { router: React.PropTypes.object.isRequired } export default App;

或使用

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

”`

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 4.0 许可协议