React中用NavLink/Link替换<a>后仅跳转路径不渲染的修复方案

DevOps 小满

2026-7-8

问题描述

使用的版本

React及相关依赖版本

<div className="topnav">
  <NavLink to="/" activeClassName="active" exact={true}>
    Home
  </NavLink>
  <NavLink to="/todo" activeClassName="active" exact={true}>
    Todo
  </NavLink>
  <NavLink to="/about" activeClassName="active">
    About
  </NavLink>
  <a href="/">Home</a>
</div>

路由配置代码

<BrowserRouter>
  <>
    <Navigation />
    <img src={logo} className="App-logo" alt="logo" />

    <Switch>
      <Route path="/" exact>
        <Home />
      </Route>
      <Route path="/todo">
        <TodoApp />
      </Route>
      <Route path="/about">
        <About />
      </Route>
    </Switch>
  </>
</BrowserRouter>

当前应用使用<a>标签时功能正常，但替换为<Link>或<NavLink>后，只会跳转路径却不会重新渲染应用，该如何修复？

解决方案

核对组件导入路径
必须从react-router-dom正确导入NavLink和Link，错误导入会导致组件失去路由导航能力：
```
import { NavLink, Link } from 'react-router-dom';
```
确认Router包裹范围
所有使用NavLink/Link的组件都要被BrowserRouter（或HashRouter）包裹，你的代码中Navigation已在BrowserRouter内，这部分没问题，但要确保项目中没有其他组件脱离Router范围。
检查版本兼容性
从截图看你用的是React Router v5，Switch、NavLink的写法符合v5规范，但如果混用了v6的API（比如用Routes替代Switch）会导致路由失效，确认package.json中依赖版本：
```
"react-router-dom": "^5.3.0"
```
避免多Router实例
项目中只能存在一个BrowserRouter（或同类Router组件），多实例会造成路由状态隔离，导致导航后不触发渲染。
排查组件优化影响
如果页面组件（Home、TodoApp等）用了React.memo或自定义shouldComponentUpdate，可能阻止路由切换时的重渲染，可暂时移除这类优化验证。
清除浏览器缓存
浏览器缓存可能引发路由逻辑异常，尝试清除缓存或用Ctrl+F5强制刷新后再测试。