React Router DOM嵌套路由异常：访问/自动跳转至/security

问题所在 #

你在app.tsx里单独配置了一条path="/"的路由，这条路由的元素是<Navigate to="./security" />，这就是访问根路径/时自动跳转到/security的直接原因。同时这条路由和path="/*"的通配符路由存在匹配冲突，React Router会优先匹配path="/"这条更具体的路由，直接触发跳转逻辑。

修复方案 #

1. 删除app.tsx中那条带<Navigate>的path="/"路由，只保留包裹ProfilePage的路由，让ProfilePage内部的子路由来处理不同路径的渲染。
2. 补全ProfilePage.tsx中未闭合的<Route>标签，避免语法错误。

修正后的代码 #

app.tsx

<Route
  path="/*"
  element={
    <RequireAuth>
      <ProfilePage />
    </RequireAuth>
  }
/>

（也可以更简洁地写成path="/"，ProfilePage内部的<Routes>会自动处理子路径匹配）

ProfilePage.tsx

<Routes>
  <Route
    path="/"
    element={/* 你的example jsx组件 */}
  />
  <Route
    path="security"
    element={/* 你的jsx2组件 */}
  />
</Routes>

这样配置后，访问/会渲染你指定的example组件，访问/security会渲染jsx2组件，不会再自动跳转。

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