History.push 在 axios 拦截器中不起作用（url 更改但组件没有更改）

Question

当我的刷新令牌过期时，我将被推回登录页面，我已经看过所有示例并尝试应用但它对我不起作用，我再次使用它与 react-router-dom v6

index.js

  <Provider store={store}  >
    <BrowserRouter history={history}>
      <App />
    </BrowserRouter>
  </Provider>

App.js

 <div className="App" >
  <LoadingPage />
  <FetchProfile />
  <AlertMessages />

  <Routes >
    <Route path="/" element={<MainLayout />}>
      <Route path="/users" element={<UsersPage />} />
      <Route path="/agent" element={<AgentPage />} />
      <Route path="/server-database" element={<ServerDBPage />} />
      <Route path="/customers" element={<CustomersPage />} />
      <Route path="/agmdb" element={<AgmdbPage />} />
      <Route path="/profile" element={<ProfilePage />} />
      <Route path="/userlogs" element={<UserLogsPage />} />
    </Route>
    <Route path="/login" element={<LoginLayout />} />
  </Routes>
</div>

历史.js

import { createBrowserHistory } from 'history';
const history = createBrowserHistory()
export default history;

axios : 这里你就当我收到401错误（token过期）的时候，我会被推送去登录，如果我把axios的所有代码都放进去，会很长

  if (status === 401) {
      history.push("/login")
  }

当令牌过期时，它会自动将 url 转换为“https://url.com/login”，但组件不会改变

Answer 1

您应该使用

<Router>

中的

react-router

而不是

<BrowserRouter>

。 在index.js

改变：

<Provider store={store}  >
    <BrowserRouter history={history}>
      <App />
    </BrowserRouter>
  </Provider>

至：

<Provider store={store}  >
    <Router history={history}>
      <App />
    </Router>
  </Provider>

不要忘记导入Router：

import { Router } from "react-router";

查看文档了解更多信息