reactjs - 即使 URL 更改，React Router 也不会呈现组件

Question

我在以 Django 作为后端的 reactJS 中使用 JWT 令牌进行身份验证。当刷新令牌过期时，Axios 被用作拦截器，并将页面的 URL 更改为/account/login. 但是，react-router 不会呈现登录页面。

这是我的拦截器的代码：axios.js 文件

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

axios.interceptors.response.use((response) => {
   return response
}, function (error) {
   const originalRequest = error.config;

      if (error.response.status === 401 && originalRequest.url.includes('/api/token/refresh/')) {
          console.log('101')
          history.replace('/account/login/')
          store.dispatch(actionCreator.setAuthFalse());
           return Promise.reject(error);
       }

这是我的路线的代码：

在 App.js 中

<Suspense fallback={<Loader/>}>
      <BrowserRouter>
        <Fragment>
          <Navbar/>
          <Switch>
<Route exact path='/service/' component={AllServices}/>
<Route exact path='/article/' component={Article}/>
<Route exact path='/account/login/' component={LoginPage} />
         </Switch>
        </Fragment>
      </BrowserRouter>
     </Suspense>
const mapStateToProps = state => {
  return {
    accessToken: state.accessToken,
    refreshToken: state.refreshToken,
    expiresIn: state.expiresIn,
    isAuthenticated: state.isAuthenticated
  }
}

const mapDispatchToProps = dispatch => {
  return{
    auth_user_after_refresh: (refreshToken) => dispatch(authActions.getAnotherAccessToken(refreshToken)),
    logout: () => dispatch(authActions.logoutUser())
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

如何确保在 URL 更改时组件呈现？

标签： reactjsreact-routeraxios