如何用react-router-dom实现不同页面组的独立公共组件共享？

你的问题核心是同时渲染了两组布局容器，导致Sidebar和Index始终存在，路由无法正确隔离布局。用react-router-dom的**布局路由（嵌套路由）**就能实现不同路由组对应不同共享组件的需求，具体实现如下：

步骤1：导入必要组件 #

确保从react-router-dom导入Outlet，它是布局组件中用来渲染子路由内容的占位符：

import { Routes, Route, Outlet } from 'react-router-dom';

步骤2：定义布局组件 #

创建两个独立的布局组件，分别包裹各自的共享组件和路由内容：

// 带Sidebar的布局
function LayoutWithSidebar() {
  return (
    <div className='app__page'>
      <Sidebar />
      <Outlet /> {/* 这里会渲染匹配的子路由组件 */}
    </div>
  );
}

// 带Index的布局
function LayoutWithIndex() {
  return (
    <div className='reading__page'>
      <Index />
      <Outlet /> {/* 这里会渲染匹配的子路由组件 */}
    </div>
  );
}

步骤3：重构App组件的路由结构 #

将不同路由组嵌套在对应的布局路由下，只有匹配到该组路由时，才会渲染对应的布局：

function App() {
  return (
    <Routes>
      {/* 第一组：共享Sidebar的路由 */}
      <Route element={<LayoutWithSidebar />}>
        <Route path='/' element={<Body />} />
        <Route path='ingenieria-civil' element={<Ingcivil />} />
      </Route>

      {/* 第二组：仅共享Index的路由 */}
      <Route element={<LayoutWithIndex />}>
        <Route path='/estructurasmetalicas/diseñocortante' element={<Metcortante />} />
        <Route path='/geotecnia/ensayospt' element={<Spt />} />
      </Route>
    </Routes>
  );
}

关键说明 #

• Outlet是布局路由的核心，它会根据当前匹配的子路由，动态渲染对应的页面组件
• 布局组件只会在匹配到其子路由时才会被渲染，彻底解决了Sidebar和Index同时显示的问题
• 跳转路由时直接使用Link组件即可，比如：

  <Link to="/">首页</Link>
  <Link to="/estructurasmetalicas/diseñocortante">金属结构剪切设计</Link>
  

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