背景
有些时候,我们需要在非组件环境下进行路由的跳转,一般咱们的用法就是history.push() 但因为history我们一般是通过useHistory获得到的,而非组件是不能通过这种方式进行获取的 那我们应该怎么进行获取呢?
方法一
用location.href=路径
这种方法
使用这种方式进行跳转的话,可以达到跳转的目的,但是它会进行页面的强制刷新,这样的话就跟我们的单页应用程序的目标相反
方法二(推荐使用)
首先我需要先说明一下:react-router-dom
中直接有Router
这个包,但是它Router
没有history
属性
有如下公式:
Router + HashHistroy = HashRouter
Router + BrowerHistroy = BrowerRouter
github:参考
安装react-router-dom
时,默认会安装history
包,我们可以通过这个包来自己创建history对象
实现思路
单独引入Router
,并自己创建history
实现代码
import { Router, Route, Switch, Redirect } from 'react-router-dom'
import { createBrowserHistory } from 'history'
export const history = createBrowserHistory()
function App () {
return (
<Router history={history}>
复制代码
为了能够在非组件环境下拿到路由信息,需要我们自定义 Router 的 history
步骤
- 创建history.js 文件
- 在该文件中,创建一个 hisotry 对象并导出
- 在使用路由的文件中导入 history 对象,并设置为 Router 的 history
核心代码
改进: 单独封装history方法。
utils/history.js 中:
// 自定义history对象
import { createBrowserHistory } from 'history'
const history = createBrowserHistory()
export default history
复制代码
这样我们就可以在非组件环境中使用history
进行跳转操作了
App.js 中:
// 注意:此处,需要导入 Router 组件
import { Router } from 'react-router-dom'
import history from '@/utils/history'
function App() {
return (
<Router history={history}></Router>
)
}
复制代码