react-router-dom+redux哈希路由编程式切换后匹配失败问题

我之前也碰到过类似的hash history路由跳转失效的问题，结合你用的react-router-dom、react-router-redux和thunk的技术栈，给你梳理几个实用的排查和解决方向：

1. 确保history实例全局唯一 #

这是最容易踩坑的点——很多开发者会不小心创建多个hashHistory实例，导致redux里的路由操作和页面上的<Router>组件完全脱节。

你需要保证：

• 创建store时传入routerMiddleware的history，和根组件中<Router>使用的是同一个实例
• 不要在不同文件里重复调用createHashHistory()

示例代码参考：

// src/utils/history.js
import { createHashHistory } from 'history';
// 创建唯一的hash history实例并导出
export const history = createHashHistory();

// src/store/index.js
import { createStore, applyMiddleware } from 'redux';
import { routerMiddleware } from 'react-router-redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';
import { history } from '../utils/history';

// 将唯一的history传入routerMiddleware
const middleware = applyMiddleware(thunk, routerMiddleware(history));
export const store = createStore(rootReducer, middleware);

// src/index.js（根组件）
import { Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from './store';
import { history } from './utils/history';

ReactDOM.render(
  <Provider store={store}>
    {/* 这里必须使用上面导出的同一个history实例 */}
    <Router history={history}>
      {/* 你的路由配置 */}
    </Router>
  </Provider>,
  document.getElementById('root')
);

如果实例不统一，dispatch(push('/a'))只会更新redux中的路由状态，根本不会同步到浏览器的hash路径，自然匹配不到对应路由。

2. 验证依赖版本兼容性 #

react-router-redux和react-router-dom的版本对应关系很严格，版本不匹配容易出现各种诡异问题：

• 如果你用的是react-router-dom v4+，要确保react-router-redux是v5.x版本（v6及以上已经改名connected-react-router，API也有变化）
• 避免混用不同大版本的依赖，比如不要让react-router-dom是v6，却用v5的react-router-redux

可以在项目根目录执行npm list react-router-dom react-router-redux查看版本，若版本不兼容，要么降级/升级react-router-dom，要么切换到connected-react-router（官方推荐的替代方案）。

3. 检查路由配置与状态同步 #

路由路径配置 #

确认你的<Route>组件的path是否正确，比如跳转的是/a，对应的路由应该是：

<Route path="/a" component={YourAComponent} />

注意不要在path里加#，react-router会自动处理hash部分。

Reducer合并 #

检查根reducer是否正确合并了routerReducer，否则redux无法监听路由状态变化：

// src/reducers/index.js
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
import yourOtherReducers from './yourOtherReducers';

const rootReducer = combineReducers({
  // 必须包含router reducer
  router: routerReducer,
  ...yourOtherReducers
});

export default rootReducer;

调试路由状态 #

在thunk里执行dispatch(push('/a'))后，打印store中的路由状态：

// 在你的thunk action里
export const navigateToA = () => (dispatch, getState) => {
  dispatch(push('/a'));
  // 打印路由状态，看pathname是否变成了'/a'
  console.log(getState().router.location.pathname);
};

如果状态更新了但页面没变化，说明路由组件没有监听redux状态；如果状态没更新，说明routerMiddleware没生效，回到第一步检查middleware配置。

4. 临时测试：直接调用history.push #

如果上面的排查都没问题，可以在thunk里直接调用全局的history实例测试：

import { history } from '../utils/history';

export const navigateToA = () => () => {
  // 跳过redux，直接调用history.push
  history.push('/a');
};

如果这样能正常跳转，说明问题出在react-router-redux和redux的联动上，重点检查routerMiddleware的配置和reducer的合并。

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