React项目路由结构异常排查：router reducer缺失错误解决

• 确认路由reducer的挂载路径
  检查reducer.js，必须将路由reducer（比如connected-react-router的connectRouter或react-router-redux的routerReducer）合并到根reducer的router属性下，这是报错的直接原因。示例正确写法：

  import { combineReducers } from 'redux';
  import { connectRouter } from 'connected-react-router';
  import history from './history';
  import yourOtherReducer from './yourOtherReducer';
  
  const rootReducer = combineReducers({
    router: connectRouter(history), // 必须挂载在router节点
    yourModule: yourOtherReducer
  });
  

• 检查store的路由中间件配置
  打开store.js，确认是否添加了路由中间件（如connected-react-router的routerMiddleware），且中间件顺序正确。缺失或顺序错误会导致路由action无法被正确处理，出现结构异常。示例：

  import { createStore, applyMiddleware } from 'redux';
  import { routerMiddleware } from 'connected-react-router';
  import history from './history';
  import rootReducer from './reducer';
  
  const store = createStore(
    rootReducer,
    applyMiddleware(
      routerMiddleware(history), // 必须放在其他中间件前面
      // 其他业务中间件
    )
  );
  

• 验证应用的路由包裹组件
  在main.tsx中，确保用ConnectedRouter（来自connected-react-router）配合Provider包裹整个应用，且传入的history对象和store中使用的是同一个实例。如果用错组件或history不匹配，会导致路由状态无法同步到store：

  import { ConnectedRouter } from 'connected-react-router';
  import { Provider } from 'react-redux';
  import store from './store';
  import history from './history';
  import App from './App';
  
  ReactDOM.render(
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <App />
      </ConnectedRouter>
    </Provider>,
    document.getElementById('root')
  );
  

• 排查依赖的隐性更新
  即便没手动改代码，子依赖可能自动更新。查看package-lock.json或yarn.lock，检查connected-react-router、react-router-dom、react-router-redux这些包的版本：

  • React 17.0.1需搭配connected-react-router@6.x、react-router-dom@5.x，如果子依赖更新到了不兼容版本（比如react-router-dom v6），会直接导致路由状态异常。

• 清除缓存并重新构建
  浏览器缓存的旧产物或未更新的构建文件可能引发问题。清除浏览器缓存，执行npm run build（或yarn build）后重新启动项目测试。

• 检查路由跳转的触发逻辑
  确认侧边栏跳转是用connected-react-router的push/replace action creator，而非直接混用react-router的useHistory。混用会导致路由状态无法同步到redux store：

  import { push } from 'connected-react-router';
  
  // 正确的跳转方式
  dispatch(push('/target-page'));
  

内容的提问来源于stack exchange，提问作者Maria Scetta