React-router点击<Link>导航后组件未更新问题求助

嘿，我仔细看了你的代码和问题描述，发现问题其实出在React Router的路由匹配规则上，这是个很容易踩的常见小坑！

问题根源 #

你的Routes组件里，Switch下第一个Route的路径是"/"，第二个是"/main"。React Router的Route默认是模糊匹配（partial match）——也就是说，只要当前URL包含该路径前缀，就会匹配成功。当你跳转到"/main"时，"/"是"/main"的前缀，所以Switch会优先匹配第一个Route，始终渲染App组件，自然不会切换到Page2。这也是为什么Redux store里的路径已经更新，但页面组件没变化的原因。

修复方案 #

1. 给根路径路由添加exact属性

修改routes.jsx，给根路径的Route加上exact属性，确保只有当URL完全匹配"/"时才渲染App：

import React from "react";
import { Switch, Route } from "react-router";
import routes from "../../constants/routes";
import App from "../app/app";
import Page2 from "../page2/page2";

class Routes extends React.Component {
  render() {
    return (
      <Switch>
        {/* 添加exact，强制完全匹配根路径 */}
        <Route exact path={routes.ENTRY} component={App} />
        <Route path={routes.MAIN} component={Page2} />
      </Switch>
    );
  }
}

export default Routes;

2. （可选）简化Root组件

你的Root组件不需要用类组件，改成函数组件更简洁，也避免不必要的生命周期疑虑：

import React from "react";
import { ConnectedRouter } from "connected-react-router";
import { Provider } from "react-redux";
import Routes from "../core/routes";

const Root = ({ store, history }) => (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Routes />
    </ConnectedRouter>
  </Provider>
);

export default Root;

3. 确认跳转方式正确

确保你在组件中使用的是react-router-dom提供的Link组件（或通过Redux dispatchpush action）来跳转，不要用原生<a>标签：

// 正确导入
import { Link } from "react-router-dom";

// 组件内使用
<Link to={routes.MAIN}>跳转到Page2</Link>

测试验证 #

修改完成后，重新运行npm run dev，点击链接应该就能正常切换到Page2组件了，Redux store的路由状态也会和页面组件保持一致~

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