如何从 ReactJS 中的外部函数重定向到路由

Posted 2023-02-24

【中文标题】如何从 ReactJS 中的外部函数重定向到路由

【英文标题】：How to redirect to a route from an external function in ReactJS

【发布时间】：2019-05-07 08:21:45

【问题描述】：

这是代表登录页面的组件

import  HttpService  from 'src/assets/js/httpservice';
// ** omissis other imports **

export default class PrivatePage extends React.Component 
    constructor(props) 
        super(props);
    

    public render() 
        return (
            <div>
                <ul>
                    <li>
                        <InputText name="Text" id="Text" />
                    </li>
                    <li>
                        <InputText name="Email" id="Email" />
                    </li>
                    <li>
                        <Button onClick=this.send label="Send ticket" />
                    </li>
                </ul>
            </div>
        )
    

    private send() 
        HttpService.post(PATH.sendTicket, this.state.ticketModel).then(data => 
            if (data.ErrorCode === 0) 
                this.setState(
                    sentSuccessfull: true
                );
            
            else 
                // show an error popup
            
        );
    

当按下“发送票证”按钮时，它会调用HttpService.post 方法进行API 调用以向系统发送票证。正如您在导入部分中看到的，HttpService 托管在外部 JS 文件中。这是HttpService.post方法的代码。

public static async post(path, body) 

    return window.fetch(path, 
        body: JSON.stringify(body),
        cache: "no-cache",
        method: "post"
    )
        .then(data => 
            // call successfull
        )
        .catch(data => 
            if (data.status === 401) 
                // REDIRECT HERE
            
            else 
                return data.json();
            
        );

现在，如果 API 调用因用户未通过身份验证而失败（返回 HTTP 状态 401），我需要将用户重定向到登录页面。我会避免在每个组件中处理 401 HTTP 状态，所以我更喜欢直接在 HttpService.post 方法内进行重定向。

【问题讨论】：

是***.com/questions/2604530/…的重复吗？

不，链接帖子中的问题与我的问题完全不同。

是否有理由在私有发送功能 else 块中在客户端重定向？您将在其中显示错误弹出窗口。例如，您可以在触发重定向的错误弹出窗口上有一个关闭按钮。

@Lloyd 我更喜欢重定向以编程方式进行，无需任何用户交互。

好吧，您仍然可以在客户端以编程方式重定向，如果您在 catch 块服务器端抛出错误，然后添加一个带有重定向的 catch 块客户端。在我回答之前只是想确定是否有其他原因您不希望它出现在客户端，因为最终结果是相同的

【参考方案1】：

试试下面的，让我知道它是否适合你，像这样更改服务器端：

public static async post(path, body) 

    return window.fetch(path, 
        body: JSON.stringify(body),
        cache: "no-cache",
        method: "post"
        )
        .then(data => 
            // call successfull
        )
        .catch(data => 
            // server side redirect below:
            if (data.status === 401) 
              data.redirect(url, 401)
            
            else 
            return data.json();
            
        );

然后客户端执行以下操作：

     private send() 
     const  history  = this.props 
        HttpService.post(PATH.sendTicket, this.state.ticketModel).then(data => 
            if (data.ErrorCode === 0) 
                this.setState(
                    sentSuccessfull: true
                );
            
        ).catch(err => 
          hirstory.push('/your-route-here')
        )
      

或者，如果您不使用 react-router，则可以使用 history.push 而不是使用

location.href = '/your-route-here'

或者类似的东西，但是使用 location.href 方法会清除您的应用程序状态，实际上就像您刷新了页面一样。

如果这有帮助，请告诉我

劳埃德

【讨论】：

我认为您的解决方案与可能的解决方案相同，但如果我将其付诸实践，这意味着我必须在每个 React 组件中处理 401 HTTP 状态进行重定向。我会直接在 httpservice.js 文件中的 post 方法中直接在全局范围内处理 401 状态一次。

好的，我将使用上面的服务器端解决方案进行编辑，请参阅服务器端承诺中的 catch 块。