在React的非组件环境下拿到路由信息

背景

有些时候,我们需要在非组件环境下进行路由的跳转,一般咱们的用法就是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

步骤

1. 创建history.js 文件
2. 在该文件中，创建一个 hisotry 对象并导出
3. 在使用路由的文件中导入 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>
  )
}