如何仅渲染一次Overlay组件，而非在每个Route中重复渲染？

试试这么搞：用React Router的嵌套路由+Outlet组件，既能让Overlay只渲染一次，还能根据当前路由动态显示对应的页面名称，具体操作如下：

1. 重构路由与Overlay组件 #

先把Overlay改成父容器组件，内部用Outlet承载各个页面的内容，同时通过useLocation获取当前路由路径，匹配对应的页面名称：

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

// 先写个路径和页面名称的映射表，方便后续匹配
const PATH_TO_NAME = {
  '/': 'Главная',
  '/orders': 'Заказы',
  '/products': 'Товары',
  '/reviews': 'Отзывы',
  '/checkout': 'Оформить заказ'
};

// 重构后的Overlay组件
function Overlay() {
  const location = useLocation();
  // 根据当前路径拿对应的页面名称
  const currentPageName = PATH_TO_NAME[location.pathname] || '';

  return (
    <div>
      {/* 这里保留你原来Overlay里的内容，比如显示页面标题的部分 */}
      <div className="overlay-header">{currentPageName}</div>
      {/* Outlet会自动渲染当前匹配的子路由组件 */}
      <Outlet />
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <Navbar />
      <div className='container'>
        <Sidebar />
        <Routes>
          {/* 父路由：渲染一次Overlay，所有子路由都在Overlay内部显示 */}
          <Route element={<Overlay />}>
            {/* 子路由：把原来每个Overlay里的页面内容拆成独立组件 */}
            <Route path='/' element={<HomePage />} />
            <Route path='/orders' element={<OrdersPage />} />
            <Route path='/products' element={<ProductsPage />} />
            <Route path='/reviews' element={<ReviewsPage />} />
            <Route path='/checkout' element={<CheckoutPage />} />
          </Route>
        </Routes>
      </div>
    </div>
  );
}

2. 为啥这么做？ #

• Overlay作为父路由的组件，只会在第一次匹配时渲染一次，后续切换子路由时，只有Outlet里的页面内容会更新，Overlay本身不会重复渲染。
• 用路径映射表+useLocation动态获取页面名称，不用再给每个路由手动传pathName参数，减少重复代码。
• 把每个页面的内容拆成独立组件，也符合React组件化的设计思路，后续维护更方便。

如果暂时不想拆分组件，也可以在Overlay里根据当前路径直接渲染对应内容，但拆分组件是更推荐的做法。

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