React Router子组件无法显示求助：仅Nav组件可见

你的问题出在两个核心点上：

1. 父路由组件缺少<Outlet />：react-router中，父路由的组件必须包含<Outlet />才能渲染子路由的内容，你的Nav组件里没有这个元素，导致MainPage找不到渲染位置。
2. 默认路径未匹配到MainPage：页面加载后默认访问/，但你的子路由路径是mainpage/，初始状态下不会自动触发MainPage渲染。

步骤1：修改Nav组件，添加Outlet #

在Nav组件中导入Outlet，并在header之后添加该元素，用来承载子路由的内容：

import React from 'react';
import { Link, Outlet } from "react-router-dom"; // 导入Outlet

function Nav(props) {
  return (
    <>
      <header className="header">
        <div className="header-container">
          <nav className="header-nav">
            <ul className="nav-list">
              <li>
                <Link to="mainpage">Home</Link> {/* 去掉末尾斜杠，避免路径匹配歧义 */}
              </li>
              <li>
                <Link to="news">News</Link> {/* 统一路径小写，保持规范 */}
              </li>
              <li>
                <Link to="about">About</Link>
              </li>
              <li>
                <Link to="contacts">Contacts</Link>
              </li>
            </ul>
          </nav>
        </div>
      </header>
      <Outlet /> {/* 子路由内容会渲染在此处 */}
    </>
  );
}

export default Nav;

步骤2：调整路由配置，设置默认渲染MainPage #

修改createBrowserRouter配置，把MainPage设为index路由，这样访问根路径/时会自动渲染它：

import React from 'react';
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import MainPage from "./components/MainPage";
import ReactDOM from 'react-dom/client';
import Nav from "./components/Nav";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Nav />,
    children: [
      {
        index: true, // 设置为index路由，匹配父路径时自动渲染
        element: <MainPage />,
      },
      // 后续可添加其他子路由示例
      // { path: "news", element: <News /> },
      // { path: "about", element: <About /> },
      // { path: "contacts", element: <Contacts /> },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

额外提示 #

• 路径尽量不要加末尾斜杠，避免react-router路径匹配出现异常。
• 如果想保留mainpage作为独立路径，也可以给根路径设置重定向，但用index路由是更简洁的方案。

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