React Router后代路由匹配失效与导航节流问题求助

问题概述 #

• 采用React Router后代路由模式搭建项目路由结构
• 预期访问根路径/时自动跳转至/login对应组件，当前逻辑未生效
• 异常表现：若将子路由中/login路径改为/、或设置为index路由匹配父级路由，会触发浏览器节流卡顿，所有NavLink组件无法正常工作

现有问题代码 #

根组件路由 #

<Routes>
  <Route path="/*" element={<AppContainer />} />      
</Routes>

AppContainer组件 #

return (<App />);

App组件路由 #

<Routes>
   <Route path="/login" element={<LoginContainer />} />      
</Routes>

触发卡顿的NavLink代码 #

<NavLink to="/ehmintegrate" activeClassName="navitem--active"
   isActive={(match, location) => { return location?.pathname == "/ehmintegrate" }}>
  <div>Integration</div>                         
</NavLink>

根因分析 #

1. 重定向失效原因：App组件内的路由表仅配置了/login的匹配规则，未定义根路径/的匹配逻辑，访问/时无对应渲染元素，也没有触发跳转的逻辑，自然无法跳转到登录页。
2. 卡顿原因：违反React Router v6后代路由的匹配规则。子组件内独立<Routes>的路由如果配置路径为/或index路由，会和外层根路由/*形成匹配死循环：根路径匹配到AppContainer，渲染App后App内的根路由再次触发同路径匹配，无限重复渲染直接耗尽浏览器性能，导致卡顿、交互组件无响应。

修复方案 #

• 第一步：补全根路径重定向逻辑，不要直接修改/login的路径为根路径，在App组件的路由表中新增独立重定向规则：

import { Routes, Route, Navigate } from 'react-router-dom';

// App组件内路由配置
<Routes>
  {/* 根路径重定向，加replace避免留下无效历史记录 */}
  <Route path="/" element={<Navigate to="/login" replace />} />
  <Route path="/login" element={<LoginContainer />} />
  {/* 其余业务路由（包括/ehmintegrate）统一在路由表中声明，避免分散匹配 */}
  <Route path="/ehmintegrate" element={<EhmIntegrateComponent />} />
</Routes>

• 第二步：修正NavLink的激活状态判断逻辑。移除硬编码的pathname全等判断，React Router会自动根据to属性匹配激活状态，硬编码判断无法兼容尾斜杠、路由参数等场景，还可能触发额外重渲染。v6版本下通过className回调获取激活状态即可：

<NavLink 
  to="/ehmintegrate"
  className={({ isActive }) => isActive ? "navitem--active" : ""}
>
  <div>Integration</div>                         
</NavLink>

• 额外优化：AppContainer组件仅做无意义的组件透传、没有承载布局/全局逻辑的话，可以直接把App组件挂载到根路由上，减少一层无意义的组件嵌套，避免路由上下文匹配异常。

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