根据最新发布的 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 实现这一目标的最佳方法是什么?
谢谢大家!!!