react项目中非组件环境下拿到路由信息

问题导入

        一般我们在非组件中跳转路由,由于hooks只能在函数组件中使用,所以我们在非组件中可以用window.location.href,例如:

window.location.href = '/login'

 这里有一个问题,就是使用window.location.href跳转路由会刷新页面,那么如何在不刷新页面的情况下跳转路由呢,接下来我们来说一下解决办法

背景

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

有如下公式：

Router + HashHistroy = HashRouter

Router + BrowerHistroy = BrowerRouter

详情参考github

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

接下来我们就来说说怎么创建

封装history组件

第一步:导入createBrowserHistory

import { createBrowserHistory } from 'history'

第二步:创建history对象并导出

const history = createBrowserHistory()

export default history

完整代码:

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

const history = createBrowserHistory()

export default history

注意点:使用history对象时导入路由组件时要使用Router组件,例如:

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

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

这是如果我们再进行文章开头的跳转时就可以使用如下方式:

import history from './history' // 导入history对象
history.push('/login') // 就可以像useHistory一样跳转路由了

history对象打印如下: