Reaction Router^6.0.0-Beta.0历史属性删除-在Reaction上下文之外导航 [英] React Router ^6.0.0-beta.0 history prop removal - navigating outside of react context

问题描述

根据Reaction路由器的最新v6.0.0-alpha.5版本，删除了历史道具：https://github.com/ReactTraining/react-router/releases/tag/v6.0.0-alpha.5

移除道具并移开设置责任 向上/向下将监听程序(history.Listen)放入包装器 组件(、等)。现在是一个 受控组件，该组件仅为 应用程序。

使用useNavigate挂钩可以轻松地在Reaction上下文中导航。

但现在在当前的V6中，从BrowserRouter中删除历史道具如何影响路由器上下文之外的导航？ 例如，如果我有一个这样的服务类：

    class Service {
    
    constructor() {
        let service = axios.create({
            baseURL: BASE_URL,
            headers: {
                'Content-type': 'application/json; charset=utf-8'
            },
            timeout: 60000,
            withCredentials: true
        });
        
        this.service = service;
    }

    handleError(path, err) {
        if (axios.isCancel(err)) { // Catch axios request cancelation
            console.log('caught cancel', err.message)
        } 
        else if ( err.response && err.response.status === 401) { // Unauthorized
            console.log('user unautorized');

            window.location.href = '/auth/login'
        }
        else {
            console.log(`Had Issues getting to the backend, endpoint: ${path}, with data: ${null}`);
            console.dir(err);
            throw err;
        }
    }
    
    async get(path, params, loaderTrackerArea) {
        try {
            const response = await trackPromise(this.service.request({
                method: 'GET',
                url: path,
                params
            }), loaderTrackerArea);

            return response.data;
        } catch (err) {
            this.handleError(path, err);
        }
    }
}
export default new Service();

现在，我想得到的是在handleError函数中重定向到登录页面，目前我使用的是纯Java解决方案，用当前版本的Reaction-Router-Dom实现这一点的最好方法是什么？

谢谢大家！

推荐答案

我遇到了同样的问题(因为该问题仍在最终版本中)。虽然没有可以传递自定义历史记录对象的现有接口，但是基于BrowserRouter实现，围绕Router组件编写自定义包装器实际上非常容易。

有关代码，请参阅https://github.com/remix-run/react-router/discussions/8241#discussioncomment-1677474。

编辑： 从REACT-ROUTER-DOM v6.1.0历史路由器开始，它是其实现的一部分，因此您可以直接执行以下操作：

import {HistoryRouter} from 'react-router-dom'
import {createBrowserHistory} from 'history'

const history = createBrowserHistory()

<HistoryRouter history={history} />

这篇关于Reaction Router^6.0.0-Beta.0历史属性删除-在Reaction上下文之外导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！