React Router Redux哈希路由导航失效问题求助

Hey there, 我看你遇到的这个问题在React + Redux + React Router的项目里挺常见的——URL变了但页面没更新，核心原因大概率是Redux和React Router的联动没配置到位，咱们一步步来排查解决：

1. 必须正确集成connected-react-router #

如果你用Redux的dispatch来触发路由跳转，一定要确保connected-react-router已经正确配置，不然Redux管理的路由状态和React Router的实际路由状态会脱节，导致页面不更新。

• 首先，创建store时要传入哈希历史对象，生成路由reducer并加入路由中间件：

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { connectRouter, routerMiddleware } from 'connected-react-router';
import { createHashHistory } from 'history';

// 创建哈希路由的history实例
const history = createHashHistory();

// 合并所有reducer，把路由reducer加进去
const rootReducer = combineReducers({
  router: connectRouter(history),
  // 这里放你的其他业务reducer
});

// 添加路由中间件，让Redux能处理路由相关的action
const middleware = [routerMiddleware(history)];

// 最终创建store
const store = createStore(
  rootReducer,
  applyMiddleware(...middleware)
);

• 然后在根组件里，用ConnectedRouter替换原来的HashRouter，并传入上面的history对象：

import { ConnectedRouter } from 'connected-react-router';
import { Provider } from 'react-redux';
import { Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Switch>
          <Route path="/login" component={LoginPage} />
          <Route path="/dashboard" component={DashboardPage} />
        </Switch>
      </ConnectedRouter>
    </Provider>
  );
}

2. 修正跳转动作的写法 #

你现在写的store.dispatch(push('#/dashboard'))是多余的——connected-react-router的push方法会自动适配哈希路由，不需要手动加#，直接写成：

store.dispatch(push('/dashboard'))

手动加#反而可能导致路径匹配异常，这也是常见的坑点。

3. 确保组件能感知路由变化 #

如果你的Dashboard页面不是直接由Route组件渲染的（比如嵌套在其他非路由组件里），它可能不会自动监听路由变化。这时候需要用withRouter高阶组件包裹它：

import { withRouter } from 'react-router-dom';

const DashboardPage = (props) => {
  // 现在props里会包含history、location等路由属性，能感知路由变化
  return <div>仪表盘页面</div>;
};

export default withRouter(DashboardPage);

4. 检查Switch的路由配置 #

最后确认一下Switch里的路由有没有冲突，比如给登录页路由加上exact，避免和其他路径匹配混淆：

<Switch>
  <Route exact path="/login" component={LoginPage} />
  <Route path="/dashboard" component={DashboardPage} />
</Switch>

按照这几步走下来，应该就能解决URL变化但页面不渲染的问题了。

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