[JavaScript知识库]react如何在非组件环境下拿到路由信息

一.背景

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

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

二.思路

1.单独引入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}>

三.实现步骤

1.在utils/history.js 中定义和导出：

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

const history = createBrowserHistory()

export default history

2.App.js 中引用：

// 注意：此处，需要导入 Router 组件
import { Router } from 'react-router-dom'
import history from '@/utils/history'

function App() {
  return (
    <Router history={history}></Router>
  )
}