为什么 react-router 在调度时会自动返回上一个路由答案

【问题标题】：why react-router automatically go back to previous route on dispatch为什么 react-router 在调度时会自动返回上一个路由
【发布时间】：2020-08-03 11:26:22
【问题描述】：

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

该应用程序有几个选项卡，每个挂载时都会调用loadData 从后端获取。当我在选项卡#1 中并尝试导航到选项卡#2 时，调用#2 的loadData 方法。但是在调用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'

【问题讨论】：

你能把你的reducer的代码贴出来吗？
@AdrianPascu 谢谢我编辑了上面的 index.js。我没有更改路由的原始减速器。
@AdrianPascu 我找到了原因，它在减速器上。

标签： reactjs redux react-redux react-router react-router-dom

【解决方案1】：

好吧，结果证明 react-router 和 redux 都不是问题，而是我忽略了更新的旧减速器。在那个 reducer 中，window.location.hash 默认是重置的。这解释了一切——每次调度都会触发该减速器。删除后，一切都按预期工作。

【讨论】：