为什么反应路由器会在派遣时自动返回上一条路线

我有一个旧的应用程序想要向其添加react-router。具体来说，我正在使用HashRouter。该应用程序还使用redux和react-redux，但没有其他中间件，例如saga或thunk。

该应用程序有多个选项卡，每个选项卡都将挂载loadData以从后端调用。当我进入Tab＃1并尝试导航至Tab＃2时，将loadData调用＃2的方法。但是在调用时dispatch，页面会自动返回至标签1。数据正在加载，并且在加载后（已调用所有分派），我尝试导航到tab＃2，这次成功了。

我不明白为什么。看起来每次dispatch调用时，路由器都会将窗口位置还原到上一个。有人可以给我提示如何解决吗？

简化代码：

tab＃1和tab＃2都具有相似的结构

function tab1(props){
const [initialized, setInitialized] = useState(false);
const dispatch = useDispatch();

useEffect(()=>{
  if(!initialized){
    loadData();
    setInitialized(true);
  }
}, [initialized])

function loadData(){
  // if data already in store, exit function early.
  // otherwise:
  dispatch({type: 'REQUEST_DATA'});
  // fetch backend
  // after receive json, dispatch
  dispatch({type:'RECEIVE_DATA', data: json});
}

return (
 // return
)

}

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore, combineReducers, applyMiddleware } from "redux";
import { HashRouter, Switch, Route } from "react-router-dom";
import logger from "redux-logger";
import * as reducers from "./reducers";
import createPersistedState from './createPersistedState';
...

let middlewares = [];
if (!window.production) {
  middlewares = [logger]
}

const reducer = combineReducers({ ...reducers });

const persistedState = createPersistedState();

const store = createStore(reducer, persistedState, applyMiddleware(...middlewares));

...

const render = () => {
  ReactDOM.render(
    <React.StrictMode>
      <Provider store={store}>
          <div id="root-container">
            <HashRouter>
              <ErrorBoundary >
               <Header />
               <div className="app-wrapper">
                 <Switch>
                   <Route path='/tab1' component={tab1}/>
                   <Route path='/tab2' component={tab2}/>
                 </Switch>
               </div>
               <Footer />
             </ErrorBoundary>
           </HashRouter>
          </div>
      </Provider>
    </React.StrictMode>,
    document.getElementById("app")
  );
};

reducers / index.js

export {default as reducer1} from './reducer1'
export {default as reducer2} from './reducer2'
export {default as reducer3} from './reducer3'
export {default as reducer4} from './reducer4'