react-router ^6.0.0-beta.0 历史props移除 - 在react上下文之外导航

IT技术 reactjs react-router react-router-dom
2021-05-02 11:41:14

根据最新发布的 react router v6.0.0-alpha.5 版本,history prop 已经被移除:https : //github.com/ReactTraining/react-router/releases/tag/v6.0.0-alpha.5

删除了props并将设置/拆除侦听器 (history.listen) 的责任转移到包装器组件(、 等)中。现在是一个受控组件,它只为应用程序的其余部分设置上下文。

使用 useNavigate 钩子在 React 上下文中导航很简单。

但是现在在当前的 V6 中,从 BrowserRouter 中删除 history 属性如何影响路由器上下文之外的导航?例如,如果我有一个这样的服务类:

    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 函数中重定向到登录页面,目前我使用的是纯 javascript 解决方案,使用当前版本的 react-router-dom 实现这一目标的最佳方法是什么?

谢谢大家!!!

1个回答

我遇到了同样的问题(因为该问题仍在最终版本中)。虽然没有现有的接口来传递自定义历史对象,但Router根据BrowserRouter实现围绕组件编写自定义包装器实际上很容易

代码https://github.com/remix-run/react-router/discussions/8241#discussioncomment-1677474

编辑: 从 react-router-dom v6.1.0 HistoryRouter 是其实现的一部分,因此您可以直接执行以下操作:

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

const history = createBrowserHistory()

<HistoryRouter history={history} />