React：共享组件时如何为不同路由配置差异化布局

不用嵌套布局也能实现需求，给你两种简单直接的实现方式：

方法一：利用路由元数据（推荐，扩展性强） #

核心思路是把布局配置（是否显示侧边栏、内容区域样式）和路由绑定，让Layout组件根据当前路由的配置自动调整内容区域结构，Navbar和Footer只写一次，完全不用重复。

步骤1：修改路由配置，添加布局元数据 #

把路由改成数组形式，给每个路由加上meta字段定义布局规则：

import { BrowserRouter, Routes, Route } from "react-router-dom";

// 路由配置数组，包含布局元数据
const routeConfig = [
  {
    path: "/",
    element: <Home />,
    meta: { hasSidebar: true, contentClass: "content-small" }
  },
  {
    path: "/about",
    element: <About />,
    meta: { hasSidebar: true, contentClass: "content-small" }
  },
  {
    path: "/contact",
    element: <Contact />,
    meta: { hasSidebar: false, contentClass: "content-large" }
  }
];

// 渲染路由
function App() {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          {routeConfig.map(route => (
            <Route key={route.path} {...route} />
          ))}
        </Routes>
      </Layout>
    </BrowserRouter>
  );
}

步骤2：改造Layout组件，根据元数据渲染内容区域 #

在Layout里用matchRoutes获取当前路由的元数据，动态渲染Content和Sidebar：

import { Outlet, useLocation, matchRoutes } from "react-router-dom";

const Layout = () => {
  const location = useLocation();
  // 匹配当前路由的配置
  const currentRoute = matchRoutes(routeConfig, location)[0]?.route;
  // 解构元数据，默认带侧边栏、小尺寸内容
  const { hasSidebar = true, contentClass = "content-small" } = currentRoute?.meta || {};

  return (
    <>
      <Navbar />
      {/* 主内容区域 */}
      <div className="page-container">
        <Content className={contentClass}>
          <Outlet /> {/* 这里渲染页面组件的核心内容 */}
        </Content>
        {/* 根据元数据决定是否显示侧边栏 */}
        {hasSidebar && <Sidebar />}
      </div>
      <Footer />
    </>
  );
};

步骤3：简化页面组件 #

页面组件只需要写核心内容，不用再包裹Content和Sidebar：

// About页面示例
const About = () => {
  return (
    <>
      <h1>关于我们</h1>
      <p>这是关于页面的具体内容...</p>
    </>
  );
};

// Contact页面示例
const Contact = () => {
  return (
    <>
      <h1>联系我们</h1>
      <form>
        {/* 表单内容 */}
      </form>
    </>
  );
};

方法二：直接判断当前路由（适合路由少的场景） #

如果你的路由不多，不用搞元数据，直接在Layout里判断当前路径即可：

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

const Layout = () => {
  const { pathname } = useLocation();
  // 判断是否是联系页面
  const isContactPage = pathname === "/contact";

  return (
    <>
      <Navbar />
      <div className="page-container">
        <Content className={isContactPage ? "content-large" : "content-small"}>
          <Outlet />
        </Content>
        {/* 非联系页面才显示侧边栏 */}
        {!isContactPage && <Sidebar />}
      </div>
      <Footer />
    </>
  );
};

这种方式更简单，不用改路由结构，适合小型项目。

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