[JavaScript知识库]React怎样在非组件环境下拿到路由信息实现路由跳转

?最近写项目的时候遇到一个问题 如图所示:

用户token失效后，页面需要跳转回登录页面，用location.href直接赋值会导致页面刷新(对SPA来说是可耻的)。而且location.href跳转的时候，页面并没有提示信息出现就直接跳转了，然后就想着使用useHistory来进行跳转，但是hooks只能在函数组件或者其它hooks中使用，然后人就没了。各种查资料之后终于找到方法了。解决方法如下：

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

// 单独封装 默认导出
import { createBrowserHistory } from 'history'
const history = createBrowserHistory()
export default history

然后再导入使用即可：?

?

?

**附：路由中导入使用：

import React from 'react'
import { Router, Route, Switch } from 'react-router-dom'
// import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import history from './utils/history'
import Login from './pages/Login'
import Layout from './pages/Layout'
import NotFound from './pages/NotFound'

export default function App () {
  return (
    <Router history={history}>
      <div className="app">
        <Switch>
          <Route path="/login" component={Login}></Route>
          <Route path="/layout" component={Layout}></Route>
          {/* 404页面 */}
          <Route component={NotFound}></Route>
        </Switch>
      </div>
    </Router>
  )
}

?

?

?

?