react lazy 加载的组件，第一次路由跳转没问题，后面就无法成功跳转了？

Question

import './App.css';
// import routers from './router';
import { Suspense } from 'react';
import { HashRouter as Router, Switch, Route } from 'react-router-dom';
import { DotLoading } from 'antd-mobile'
import TabBarComponent from './components/tabBar/tabBar'
import { lazy } from 'react';
const Home = lazy(() => import('./pages/home'));
const PersonCenter = lazy(() => import('./pages/personCenter'));
// import Home from './pages/home';
// import PersonCenter from './pages/personCenter';

function App() {
  return (
    <>
      <Suspense fallback={<DotLoading />}>
        <Router>
          <Switch>
          <Route exact path='/home' component={Home} />
          <Route exact path='/personCenter' component={PersonCenter} />
          </Switch>
          <TabBarComponent />
        </Router>
      </Suspense>

    </>
  );
}

export default App;

在home.js 和 personCenter.js 中分别通过props.history.push()
去进行跳转，只能跳转成功一次。
后面路由会变，但是页面就不会再切换了。

Answer 1

问题中的 react-router-dom 是v5 版本的。我换成了v6 版本的 react-router-dom 后，就没有这个问题了。估计是v5 对lazy 的支持还不够？？