React Router中Navigation组件移动端菜单点击触发页面刷新问题

核心原因分析 #

出现这种差异的大概率是MobileMenu组件不在react-router的Router上下文范围内，或者存在Router上下文冲突，导致Link退化为普通a标签触发页面刷新，而Header内的组件处于正常的Router上下文中，所以能实现无刷新跳转。

排查与解决步骤 #

1. 确保所有使用Link的组件都被Router包裹 #

检查你的根组件结构，必须保证<BrowserRouter>（或你使用的其他Router）包裹了Header、MobileMenu以及所有路由相关组件。正确的结构示例：

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Header />
      {/* 页面主体内容 */}
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
      {/* 即使MobileMenu是弹窗组件，也要确保它的渲染逻辑在Router内部 */}
      <MobileMenu />
    </Router>
  );
}

如果MobileMenu是通过React Portal渲染到DOM的其他节点，要确保Portal的内容部分仍然在Router上下文内（即Portal的子组件是在Router内部定义的）。

2. 避免重复嵌套Router #

不要在Header、MobileMenu或Navigation组件内部再次嵌套<BrowserRouter>，多Router实例会导致上下文冲突，内层的Link会脱离顶层路由控制，引发页面刷新。整个应用只需要一个顶层Router即可。

3. 验证Link的导入与使用 #

确认Navigation组件中的Link是从react-router-dom正确导入的，而非普通HTML标签：

// 正确写法
import { Link } from 'react-router-dom';

const Navigation = () => (
  <nav>
    <Link to="/">首页</Link>
    <Link to="/about">关于</Link>
  </nav>
);

同时检查MobileMenu或Navigation上是否绑定了自定义onClick事件，若存在window.location.href这类强制跳转的代码，会覆盖Link的无刷新行为，需要移除或调整逻辑。

4. 修复React 18与react-router-dom 5.x的兼容问题 #

React 18的并发模式和旧版react-router-dom 5.x存在部分兼容问题，建议将react-router-dom升级到5.3.4及以上版本（该版本修复了React 18相关的上下文传递问题）。如果项目允许，也可以考虑升级到react-router-dom v6，获得更好的React 18支持。

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