如何在React根路径下配合Outlet标签实现嵌套路由？

你的问题出在嵌套路由的index路由配置错误，导致根路径/匹配DemoApp后，没有默认渲染DemoDashboard到Outlet中。下面是具体的修正方案：

问题分析 #

在App组件的路由配置中，你给根路径的index路由额外添加了path="demo-dashboard"属性，这是错误的：

• index路由的作用是当父路由路径完全匹配时，默认渲染的子组件，它不需要指定path属性。
• 同时你还单独配置了/demo-dashboard路由，这会直接渲染DemoDashboard，而不会通过DemoApp的布局容器。

修正步骤 #

1. 调整App组件的路由配置 #

移除根路径子路由的path属性，并按需处理单独的/demo-dashboard路由：

import { Routes, Route } from "react-router-dom";
import SignInForm from "./components/SignIn/SignInForm";
import ForgotPassword from "./components/ForgotPassword/ForgotPassword";
import SignUpForm from "./components/SignUp/SignUpForm";
import DemoSignIn from "./components/DemoSignIn/DemoSignIn";
import DemoApp from "./components/DemoSignIn/DemoApp/DemoApp";
import DemoDashboard from "./components/DemoSignIn/DemoDashboard/DemoDashboard";
import "./App.css";

export default function App(props) {
  return (
    <div className="App">
      <Routes>
        <Route path="/sign-in" element={<SignInForm />} />
        <Route path="/forgot-password" element={<ForgotPassword />} />
        <Route path="/sign-up" element={<SignUpForm />} />
        <Route path="/demo-sign-in" element={<DemoSignIn />} />
        
        {/* 根路径路由：嵌套子路由实现布局+内容 */}
        <Route path="/" element={<DemoApp />}>
          {/* index路由：访问/时默认渲染DemoDashboard到Outlet */}
          <Route index element={<DemoDashboard />} />
          {/* 可选：保留/demo-dashboard路径，同样通过DemoApp布局渲染 */}
          <Route path="demo-dashboard" element={<DemoDashboard />} />
        </Route>
      </Routes>
    </div>
  );
}

2. 确认DemoApp组件的Outlet配置 #

你的DemoApp组件中Outlet的使用是正确的，无需修改：

import React from "react";
import { Outlet } from "react-router-dom";
import styles from "./DemoApp.module.css";
import HeadNavBar from "../DemoDashboard/HeadNavBar";
import SideNavBar from "../DemoDashboard/SideNavBar";

const DemoApp = (props) => {
  return (
    <div className={styles["demo-app"]}>
      <div className={styles["head-nav"]}>
        <HeadNavBar />
      </div>
      <div className={styles["side-nav"]}>
        <SideNavBar />
      </div>
      <main className={styles["main-content"]}>
        <Outlet /> {/* 子路由组件会渲染到这里 */}
      </main>
    </div>
  );
};

export default DemoApp;

效果说明 #

• 访问根路径/时，DemoApp作为布局容器渲染，同时其内部的Outlet会自动加载index路由对应的DemoDashboard组件。
• 如果保留了path="demo-dashboard"子路由，访问/demo-dashboard时，同样会通过DemoApp布局渲染DemoDashboard，而不是直接单独渲染组件。

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