使用 react-router 以编程方式导航 [英] Programmatically Navigate using react-router

问题描述

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

render() {如果(已登录){//调度一个动作来改变路由}//返回登录组件<登录/>}

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

解决方案

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

将您的组件与 withRouter 一起使用，并使用 props 中的 history.push 来更改路由.仅当您的组件未接收到 Router 道具时，您才需要使用 withRouter，这可能发生在您的组件是由Router 并且您没有将 Router props 传递给它，或者当组件根本没有链接到 Router 并且作为独立于 Routes 的组件呈现时.

import {withRouter} from 'react-router';类 App 扩展了 React.Component {...组件DidMount(){//从 localStorage 或 API 调用获取 isLoggedIn如果(已登录){//调度一个动作来改变路由this.props.history.push('/home');}}使成为() {//返回登录组件返回<登录/>}}导出默认 withRouter(App);

<块引用>

重要提示

如果您使用 withRouter 来防止更新被shouldComponentUpdate，重要的是withRouter 将实现 shouldComponentUpdate 的组件.例如，当使用 Redux:

//这绕过了shouldComponentUpdate

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

//这不

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

或者你可以使用重定向

import {withRouter} from 'react-router';类 App 扩展了 React.Component {...使成为() {如果(已登录){return <Redirect to="/home"/>}//返回登录组件返回<登录/>}}

使用react-router v2或react-router v3，你可以利用context来动态改变路由，如

class App 扩展 React.Component {...使成为() {如果(已登录){//调度一个动作来改变路由this.context.router.push('/home');}//返回登录组件返回<登录/>}}App.contextTypes = {路由器:React.PropTypes.object.isRequired}导出默认应用程序；

或使用

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

I am developing an application in which I check if the user is not loggedIn. I have to display the login form, else dispatch an action that would change the route and load other component. Here is my code:

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

How can I achieve this as I cannot change states inside the render function.

解决方案

Considering you are using react-router v4

Use your component with withRouter and use history.push from props to change the route. You need to make use of withRouter only when your component is not receiving the Router props, this may happen in cases when your component is a nested child of a component rendered by the Router and you haven't passed the Router props to it or when the component is not linked to the Router at all and is rendered as a separate component from the 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);

Important Note

If you are using withRouter to prevent updates from being blocked by shouldComponentUpdate, it is important that withRouter wraps the component that implements shouldComponentUpdate. For example, when using Redux:

// This gets around shouldComponentUpdate

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

// This does not

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

or you could use Redirect

import {withRouter} from 'react-router';

class App extends React.Component {
     ...
     render() {
         if(isLoggedIn) {
              return <Redirect to="/home"/>
         }
         // return login component
         return <Login />
    }
}

With react-router v2 or react-router v3, you can make use of context to dynamically change the route like

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;

or use

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

这篇关于使用 react-router 以编程方式导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！