React Router地址栏URL更新但组件未加载问题求助

问题根源 #

• 嵌套路由未配置挂载出口：你将About/Contact/Services作为Home路由的子路由，但Home组件内未渲染<Outlet />，子路由组件没有挂载的位置。若这些页面并非Home的嵌套内容，完全不需要写成子路由，直接与Home路由同级即可。
• 路径拼写错误：Services组件导入路径为./pages/depressionadults，但路由中写的是/pages/deppresionadults（多了一个字母p），导致路径不匹配。
• 无效的exact属性：React Router v6 中Route默认是精确匹配，exact属性已被移除，无需添加。

修正后的代码 #

情况1：页面为独立路由（非嵌套）

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import About from "./pages/aboutus";
import Contact from "./pages/contactus";
import Services from "./pages/depressionadults";
import Home from "./pages/Home";

export default function Main() {
  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/pages/depressionadults" element={<Services />} />
          <Route path="/pages/aboutus" element={<About />} />
          <Route path="/pages/contactus" element={<Contact />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

情况2：页面为Home的嵌套内容

先修改Home组件，添加子路由挂载出口：

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

export default function Home() {
  return (
    <div>
      <h1>Home 主页面</h1>
      {/* 子路由组件会渲染在这个位置 */}
      <Outlet />
    </div>
  );
}

再调整Main组件的路由为相对路径：

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import About from "./pages/aboutus";
import Contact from "./pages/contactus";
import Services from "./pages/depressionadults";
import Home from "./pages/Home";

export default function Main() {
  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />}>
            <Route path="pages/depressionadults" element={<Services />} />
            <Route path="pages/aboutus" element={<About />} />
            <Route path="pages/contactus" element={<Contact />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

可选：修正Contact组件内容

当前Contact组件返回的是首页文本，可根据需求修改：

import React from "react";

export default function Contact() {
  return <h1>联系我们页面</h1>;
}

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