React中使用NavLink手动刷新后点击重复加载页面问题

问题根源分析 #

1. 嵌套路由路径错误：父路由path="/"下的子路由使用了绝对路径（/Dashboard、/ManageContent），破坏了路由嵌套关系，刷新后客户端路由逻辑失效，导致NavLink触发浏览器全页刷新。
2. JSX语法错误：第二个NavLink标签未正确闭合，导致React渲染出异常DOM结构，NavLink失去客户端路由拦截能力，退化为普通<a>标签。
3. API使用过时：React Router v6已废弃activeClassName属性，继续使用可能引发兼容性问题。

修正后的代码 #

app.js

<BrowserRouter>
  <Routes>
    <Route path="/login" element={<Login />} />
    <Route path="/" element={<HomeLayout />}>
      {/* 子路由使用相对路径，移除开头的/ */}
      <Route path="Dashboard" element={<Dashboard />} />
      <Route path="ManageContent" element={<ManageContent />} />
    </Route>
  </Routes>
</BrowserRouter>

homelayout.js

<ul>
  <li className="nav-item">
    <NavLink 
      to="Dashboard" 
      {/* 用className回调替代废弃的activeClassName */}
      className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
    >
      <span className="pcoded-micon"> <i className="feather icon-home"></i></span>
      <span className="pcoded-mtext">Dashboard</span>
    </NavLink>
  </li>
  <li className="nav-item">
    {/* 修复NavLink标签未闭合的语法错误 */}
    <NavLink 
      to="ManageContent" 
      className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
    >
      <span className="pcoded-micon">
        <i className="feather icon-users"></i>
      </span>
      <span className="pcoded-mtext">Manage Content</span>
    </NavLink>
  </li>
</ul>

修复说明 #

• 嵌套路由改用相对路径后，React Router能正确维护路由嵌套关系，确保客户端路由始终生效，避免全页刷新。
• 修复JSX语法错误后，NavLink能正常发挥客户端路由拦截作用，阻止浏览器默认的页面跳转行为。
• 使用className回调函数判断激活状态，符合React Router v6的API规范，避免过时API带来的潜在问题。

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