React项目中,在非组件环境下我们无法调用react-router。
那么我们如何拿到路由信息或实现路由跳转呢?
以下内容,即是博主在这种场景下的解决方案,供各位参考。
背景
react-router-dom中直接有Router这个包,但是它的Router 没有history属性
有如下公式:
Router + HashHistroy = HashRouter
Router + BrowerHistroy = BrowerRouter
安装react-router-dom时,默认会安装history包,我们可以通过这个包来自己创建history对象
思路
单独引入Router,并自己创建history
说明:为了能够在非组件环境下拿到路由信息,需要我们自定义 Router 的 history
步骤
-
创建 utils/history.js 文件
-
在该文件中,创建一个 hisotry 对象并导出
-
在 App.js 中导入 history 对象,并设置为 Router 的 history
核心代码
改进,单独封装history方法。
utils/history.js 中:
// 自定义history对象
import { createBrowserHistory } from 'history'
const