React Router ^6.0.0-beta.0 历史道具删除 - 在反应上下文之外导航答案

【问题标题】：React Router ^6.0.0-beta.0 history prop removal - navigating outside of react contextReact Router ^6.0.0-beta.0 历史道具删除 - 在反应上下文之外导航
【发布时间】：2021-01-19 08:34:00
【问题描述】：

根据 react router 最新的 v6.0.0-alpha.5 版本，history 属性已被移除：https://github.com/ReactTraining/react-router/releases/tag/v6.0.0-alpha.5

移除了道具并移动了设置责任将侦听器（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实现这一目标的最佳方法是什么？

谢谢大家！！！

【问题讨论】：

如果它是一个生产应用程序，你不应该使用任何库的alpha 版本。 Alpha 版本是可用于测试的库版本。尽管如此，react hooks 只能在 React 组件中使用。这不是反应组件。你在 React 组件中的什么地方使用它？
我正在使用 v6.0.0-beta.0，现在我知道在我的组件内部，如果服务器响应 401（未授权），我可以使用 useNavigate，但如果我有很多地方，我会得到这个响应我想在一个地方重定向到登录页面，而不是在每个组件中检查响应是否是 401 重定向到登录
同样，如果它是生产应用程序，请不要使用库的 alpha 或 beta 版本。不推荐。 Hooks 不能在 React 组件之外使用。因此，您必须将历史记录传递给您的方法，或者在成功时传递回调。
好的，非常感谢！
我在这里回答了同样的问题：stackoverflow.com/a/69875097/112377

标签： reactjs react-router react-router-dom

【解决方案1】：

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

代码见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} />

【讨论】：