Question

我有一个singinUser函数，当用户单击“提交”按钮时会调用该函数。提取数据后，我希望用户重定向到另一个URL。在早期版本的react中，我曾经使用browserHistory中的'react-router'。我应该在react-router 4中做什么？

import axios from 'axios';
    const ROOT_URL = 'http://localhost:3090';

    export const signinUser = ({ email, password }) => {
        return (dispatch) => {
            axios.post(`${ROOT_URL}/signin`, { email, password })
                .then(response =>{
                    //I want to redirect
                })
                .catch(err=>{

                })
        }
    }

Answer 1

这是我个人如何对应用程序中的受保护路由执行重定向：

const GuestRoute = ({ component: Component, ...rest }) => (
  <WebServiceContextConsumer>
    {
      context =>
        <Route
          {...rest}
          render={props =>
            context.auth.getUser() 
              ? (<Redirect to={{pathname: "/", state: { from: props.location }}} />) 
              : (<Component {...props} />)
          }
        />
    }
  </WebServiceContextConsumer>
);

您需要将视图与逻辑分开。执行您的任何调用，然后使用Promise捕获响应并根据需要在View组件中进行处理。

React Router 4如何在函数内以编程方式重定向？

1 个答案: