React Router v6.10嵌套路由无法通过NavLink正常渲染问题

你的核心问题是嵌套路由的父组件未使用<Outlet />组件——React Router的嵌套路由机制要求父路由组件必须通过<Outlet />指定子路由内容的渲染容器，否则子路由组件无法被渲染，只会显示父组件本身。

修改步骤： #

在Develop组件中导入并添加<Outlet />，无需改动现有路由结构（你认为的嵌套结构完全合理）：

// Develop.tsx
import { Outlet } from "react-router-dom";

export default function Develop() {
  return (
    <div>
      {/* Develop组件自身内容 */}
      <h2>Develop 主页面</h2>
      {/* 子路由（如Web）的内容会渲染在此处 */}
      <Outlet />
    </div>
  );
}

原理说明： #

当访问/develop/web时，React Router会同时匹配develop父路由和web子路由，但需要父路由组件通过<Outlet />提供渲染位置。之前未添加<Outlet />，导致子路由的Web组件没有挂载节点，只能显示父组件Develop的内容。

你之前将Web改为同级路由能生效，是因为此时Web不需要依赖父路由的渲染容器，但这种结构破坏了你想要的嵌套路由关系，完全没必要采用。

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