react-router-dom V6嵌套路由无法渲染子路由问题排查与代码修复求助

问题原因 #

• 错误1：App组件中/main路由未配置路径通配符，若子路由定义在Main组件内部，父路由路径需添加/*允许匹配下级子路径。如果选择将子路由作为父路由的children属性声明，则不需要通配符，但需要在父组件中放置<Outlet />承载子路由内容。
• 错误2：Main组件中两个子路由的path重复，第二个子路由的路径错误写成了/main/child1，和第一个完全一致，永远匹配不到Child2组件。
• 错误3：Main组件中冗余导入了BrowserRouter，全局只需在App组件顶层声明一次Router即可。
• 错误4：<Outlet />和内部Routes同时使用逻辑冲突，二者属于两种不同的嵌套路由实现方案，不能混用。

修复方案（官方推荐写法：统一在App组件声明嵌套路由） #

App组件代码 #

import "./styles.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./Login";
import Main from "./Main";
import Child1 from "./Child1";
import Child2 from "./Child2";

export default function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/main" element={<Main />}>
            {/* 子路由作为父路由的children属性声明，path写相对路径 */}
            <Route path="child1" element={<Child1 />} />
            <Route path="child2" element={<Child2 />} />
          </Route>
        </Routes>
      </Router>
    </div>
  );
}

Main组件代码 #

import React from "react";
import { Outlet, Link } from "react-router-dom";

export default function Main() {
  return (
    <div>
      <h1>main page</h1>
      <Link to="/main/child1">child 1</Link>||||
      <Link to="/main/child2">child 2</Link> ||||
      <Link to="/">log out</Link>
      {/* 子路由内容将渲染在Outlet位置 */}
      <Outlet />
    </div>
  );
}

Child1、Child2组件原有代码无需修改。

可选方案：子路由声明在Main组件内部 #

如果希望路由拆分到对应模块维护，可采用该方案：

App组件代码 #

import "./styles.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./Login";
import Main from "./Main";

export default function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={<Login />} />
          {/* 添加通配符匹配子路径 */}
          <Route path="/main/*" element={<Main />} />
        </Routes>
      </Router>
    </div>
  );
}

Main组件代码 #

import React from "react";
import { Routes, Route, Link } from "react-router-dom";
import Child1 from "./Child1";
import Child2 from "./Child2";

export default function Main() {
  return (
    <div>
      <h1>main page</h1>
      <Link to="/main/child1">child 1</Link>||||
      <Link to="/main/child2">child 2</Link> ||||
      <Link to="/">log out</Link>
      <Routes>
        <Route path="child1" element={<Child1 />} />
        <Route path="child2" element={<Child2 />} />
      </Routes>
    </div>
  );
}

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