在React中，我应该如何设计一个带有导航栏和Outlet的布局组件？

前端开发 2026-07-07

我正在开发一个使用 react-router-dom 的React应用。我有一个布局组件，负责渲染一个 Navbar、一个 Outlet，并且还接收 children。我还拥有一个可复用的 Hero 组件，用于页面头部。

代码可以正常工作，但我对正确的结构感到困惑。布局组件应该使用 Outlet、children，还是两者都用？另外，像 Hero 这样的可复用页面组件应该与路由布局分开保留吗？

以下是相关文件：

Navbar.jsx

import Navbar from "./navbar";
//import VoiceAssistant from "./VoiceAssistant";
import { Outlet } from "react-router-dom";

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main className="mx-auto max-w-5xl p-6">
        <Outlet />
      </main>
      <main>{children}</main>
      {/* <VoiceAssistant /> */}
    </>
  );
}

Hero.jsx

import { Button } from "@/components/ui/button";

export function HeroHighlight({ children }) {
  return <span className="text-emerald-300">{children}</span>;
}

export default function Hero({ eyebrow, title, description, actionLabel, onAction }) {
  return (
    <section className="rounded-3xl bg-gradient-to-br from-blue-950 to-blue-600 p-8 text-white shadow-lg lg:col-span-2">
      {eyebrow && (
        <p className="text-sm font-bold uppercase tracking-wide text-blue-100">{eyebrow}</p>
      )}

      <h1 className="mt-5 text-3xl font-black leading-tight md:text-4xl">{title}</h1>

      {description && (
        <p className="mt-4 max-w-2xl text-base font-medium leading-7 text-blue-50">
          {description}
        </p>
      )}

      {actionLabel && (
        <Button type="button" onClick={onAction} className="mt-6 bg-white text-blue-700 hover:bg-blue-50">
          {actionLabel}
        </Button>
      )}
    </section>
  );
}

Layout.jsx

import Navbar from "./navbar";
//import VoiceAssistant from "./VoiceAssistant";
import { Outlet } from "react-router-dom";

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main className="mx-auto max-w-5xl p-6">
        <Outlet />
      </main>
      <main>{children}</main>
      {/* <VoiceAssistant /> */}
    </>
  );
}

在结构这个布局时，应该采用怎样的方式，以便React Router能正确处理嵌套路由并避免不必要的重复渲染？

解决方案

嗯，我认为在某些特殊情况下最好不要同时使用它们两者，而是只使用Outlet，并创建不同的布局组件

<Route element={<MainLayout />}>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Route>

<Route element={<DashboardLayout />}>
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="/settings" element={<Settings />} />
</Route>

如果你想同时使用Outlet和 children，你可以这样做

<Route element={<Layout><MainHeroSection/></Layout>}>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Route>

<Route element={<Layout><DashboardHeroSection/></Layout>}>
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="/settings" element={<Settings />} />
</Route>

我认为hero只有在使用该布局的所有页面都需要这个hero区域时才应该放在布局中，在这种情况下你其实不需要同时使用Outlet和 children

React