React.js react-router-dom V6 嵌套路由配置后子组件不渲染问题咨询

问题原因 #

• 父路由匹配规则错误：React Router v6 不带children属性的路由默认开启精确匹配，你在App组件中定义的/main路由没有配置通配符*，当访问/main/child1这类子路径时，父路由无法命中，要么Main组件不渲染，要么内部嵌套路由无法匹配对应路径。
• 嵌套路由路径与使用逻辑冲突：你同时在Main组件中使用了Outlet和自定义Routes两个互斥的嵌套路由渲染方案：
  1. Outlet是用来渲染App父路由中定义的children子路由的，单独配置不会生效
  2. 你在Main组件Routes中写的绝对路径/main/child1，没有对应的父路由匹配规则支持，无法命中
• 冗余依赖导入：Main组件不需要重复导入BrowserRouter，整个应用仅需保留最外层App中的一个BrowserRouter实例即可，多实例会导致路由状态不同步。

解决方案 #

提供两种生产环境常用的嵌套路由实现方式，二选一即可：

方案1：父路由统一声明嵌套结构（官方推荐，路由可集中管理） #

第一步：修改App组件路由配置

给/main路由添加children属性声明子路由，不需要加通配符：

// App组件完整代码示例
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import Login from './login';
import Main from './main';
import Children1 from './main/child1'; // 替换为你实际的子组件路径
import Children2 from './main/child2';

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={<Login />} />
          {/* 父路由配置children，自动开启子路径匹配 */}
          <Route path="/main" element={<Main />}>
            {/* 子路由用相对路径，访问路径自动拼接为/main/child1 */}
            <Route path="child1" element={<Children1 />} />
            <Route path="child2" element={<Children2 />} />
            {/* 可选配置：访问/main时默认渲染的内容 */}
            <Route index element={<div>请选择子菜单</div>} />
          </Route>
        </Routes>
      </Router>
    </div>
  );
}

第二步：简化Main组件

删除内部冗余的Routes、Router导入，保留Outlet用于渲染子路由：

// Main组件完整代码示例
import { Outlet, Link } from 'react-router-dom';

function Main() {
  return (
    <div>
      <h1>hello Home</h1>
      <Link to="/main/child1">child 1</Link> |
      <Link to="/main/child2">child 2</Link> |
      <Link to="/">log out</Link>
      {/* 子路由组件会自动渲染到Outlet位置 */}
      <Outlet />
    </div>
  );
}

方案2：嵌套路由完全写在Main组件内部（适合大型项目路由拆分场景） #

第一步：修改App组件的/main路由

添加通配符*，允许匹配所有/main开头的路径：

// App组件路由修改示例
<Route path="/main/*" element={<Main />} />

第二步：修改Main组件

删除冗余的Outlet、Router导入，内部路由使用相对路径：

// Main组件完整代码示例
import { Routes, Route, Link } from 'react-router-dom';
import Children1 from './child1'; // 替换为你实际的子组件路径
import Children2 from './child2';

function Main() {
  return (
    <div>
      <h1>hello Home</h1>
      <Link to="/main/child1">child 1</Link> |
      <Link to="/main/child2">child 2</Link> |
      <Link to="/">log out</Link>

      <Routes>
        {/* 相对路径自动拼接父路径前缀，也可以写绝对路径/main/child1 */}
        <Route path="child1" element={<Children1 />} />
        <Route path="child2" element={<Children2 />} />
      </Routes>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Seyed-Amir-Mehrizi