为啥 react-router 在调度时会自动返回上一个路由

Posted 2023-02-22

【中文标题】为啥 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 我找到了原因，它在减速器上。

【参考方案1】：

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