[JavaScript知识库]React中非组件环境下拿到路由信息

1.如何拿到路由信息，

通常情况下都是在组件情况下通过useHistory拿到路由信息的
但是有个很严重的问题，useHistory这个方法只能只能在组件环境下才能使用，如果非组件将无法使用

2. Router包 与 HashRouter/BrowerRouter的区别

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

简单理解就是：

Router + HashHistroy = HashRouter
Router + BrowerHistroy = BrowerRouter

github：[参考].

思路：

• 安装react-router-dom时，默认会安装history包，我们可以通过这个包来自己创建history对象
  • history包中有个createBrowserHistory（）方法可以创建history对象
• 然后导出这个对象，就可以在组件环境与非组件都可以拿到
  • 组件里面将 Router + BrowerHistroy达到原本BrowerHistroy/HashHistroy

3. 封装并导出history工具

核心代码赋值就可以使用

import { createHashHistory } from 'history'
const history = createHashHistory()
export default history

4. 组件中使用

5.非组件中使用