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

Posted 2023-02-21

【中文标题】React Router 4 如何在函数内以编程方式重定向？ [复制]

【英文标题】：React Router 4 How do I redirect programmatically inside a function? [duplicate]

【发布时间】：2018-12-10 17:08:20

【问题描述】：

我有一个 singinUser 函数，当用户单击提交按钮时会调用该函数。我希望用户在获取数据完成后重定向到另一个 url。在之前的 react 版本中，我曾经使用来自 'react-router' 的 browserHistory。 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=>

                )
        
    

【参考方案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 组件中以您想要的方式处理它。