React中如何在非组件环境下拿到路由信息

React项目中，在非组件环境下我们无法调用react-router。

那么我们如何拿到路由信息或实现路由跳转呢？

以下内容，即是博主在这种场景下的解决方案，供各位参考。

背景

react-router-dom中直接有Router这个包，但是它的Router 没有history属性

有如下公式：

Router + HashHistroy = HashRouter

Router + BrowerHistroy = BrowerRouter

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

思路

单独引入Router，并自己创建history

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

步骤

1. 创建 utils/history.js 文件

2. 在该文件中，创建一个 hisotry 对象并导出

3. 在 App.js 中导入 history 对象，并设置为 Router 的 history

核心代码

改进，单独封装history方法。

utils/history.js 中：

// 自定义history对象
import { createBrowserHistory } from 'history'
 
const