react 在封装的axios.js中如何使用 history.push方法跳转页面？

Question

执行顺序：
url输入首页地址跳转=》发现没登陆（判断接口返回code为触发跳转点）=》使用history跳转到登录页（url变化页面无变化）

问题：
在独立的js中如何使用history.push方法跳转，可以避免url变化页面，页面不变化的问题

//引入方法一
import { browserHistory } from 'react-router'
//引入方法二
import { useRouterHistory } from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
//引入方法三 这个方法没报错可以正常跳转 但是url变化页面没变化
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
history.replace('/login');

Answer 1

记录一下解决办法吧

utils/history.js进行封装

import { createBrowserHistory } from 'history'
export default createBrowserHistory()

app.js一级路由配置进行全局传入
此时我们的路由也应该听从BrowserRouter变为Router

 
import { Router, Route, Switch } from 'react-router-dom'
import history from './utils/history.js'
 
<Router history={history}>
      <Switch>
        {/* <Redirect form="/" exact to="/login" /> */}
        <Route path="/login" component={Login} />
        <Route path="/home" component={Layout} />
        <Route component={NotFound} />
      </Switch>
    </Router>

在响应拦截器中进行使用

import history from './history'
instance.interceptors.response.use(
  function (response) {
    return response.data
  },
  function (error) {
    // token失效的处理
    if (error.response.status === 401) {
      console.log('history', history)
      store.dispatch(logoOut())
      history.push('/login')
    }
    return Promise.reject(error)
  }
)

转自：https://blog.csdn.net/m0_52765288/article/details/121430964

Answer 2

需要从入口文件的 createBrowserHistory 返回值存起来。然后让 axios 的 use 中间件去读。

或者直接把数据返回，再在 react 组件中处理。