非组件环境下拿到路由跳转信息

最新推荐文章于 2023-10-03 22:16:07 发布

weixin_58487208

最新推荐文章于 2023-10-03 22:16:07 发布

阅读量500

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_58487208/article/details/121410825

版权

在非组件环境中，由于无法直接使用useHistory进行页面跳转，本文介绍了如何在React中通过自定义history对象来实现路由跳转。主要方法包括：1. 使用`window.location.href`直接赋值，但会导致页面刷新；2. 封装一个history工具，导出并设置为Router的history。具体实现包括创建`utils/history.js`文件，导入并设置到App.js的Router中，然后在其他非组件文件如`src/utils/request.js`中使用这个history对象的push方法。通过这种方式，可以在清除token后无跳转地进入login页面。

摘要由CSDN通过智能技术生成

背景: 需要在非组件环境跳转到指定页面, 言外之意也就是不能使用useHistory了.

react-router-dom中直接有Router这个包，但是这个Router 没有history属性.而有history属性的其他两个为HashRouter和BrowserRouter.这两个也不是凭空就有的history属性.如图

所以我们需要自己来封装一个包含history信息的utils来帮助我们实现.

安装react-router-dom时，默认会安装history包，我们可以通过这个包来自己创建history对象

为了能够在非组件环境下拿到路由信息，需要我们自定义 Router 的 history

// App.js部分代码

import { Router, Route, Switch, Redirect } from 'react-router-dom'

import { createBrowserHistory } from 'history'
export const history = createBrowserHistory()
function App () {
  return (
    <Router history={history}>

解决方案有二:

一、用window.location.href直接赋值(暴力解决)

有副作用,就是会导致页面刷新

二、封装一个history工具来拿到路由跳转信息,再传给需要该信息的组件