问题导入
一般我们在非组件中跳转路由,由于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对象打印如下: