如何解决React Router中Sidebar/Topbar与登录注册页共存渲染问题

要实现登录/注册页面单独渲染、业务页面显示侧边栏和顶栏的需求，核心是通过嵌套路由拆分路由结构，把需要共用Sidebar/Topbar的页面统一放在一个布局组件下，登录注册页面作为独立路由直接渲染。

步骤1：创建布局组件（Layout） #

新建一个Layout.jsx文件，把Sidebar、Topbar和路由出口（Outlet）封装进去，这样所有嵌套在这个布局下的页面都会自动带上侧边栏和顶栏：

import { Outlet } from "react-router-dom";
import Sidebar from "./scenes/global/Sidebar";
import Topbar from "./scenes/global/Topbar";
import { useState } from "react";

const Layout = () => {
  const [isSidebar, setIsSidebar] = useState(true);

  return (
    <div className="app">
      <Sidebar isSidebar={isSidebar} />
      <main className="content">
        <Topbar setIsSidebar={setIsSidebar} />
        {/* Outlet会渲染当前匹配的子路由组件 */}
        <Outlet />
      </main>
    </div>
  );
};

export default Layout;

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

修改App.jsx，将路由分为两类：

• 独立路由：登录、注册页面，直接渲染组件
• 布局路由：业务页面，嵌套在Layout组件下

修改后的完整代码：

import { Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import Page1 from "./pages/page1";
import LogIn from './pages/LogIn'
import SignUp  from './pages/SignUp'
import Layout from "./Layout"; // 导入布局组件
import { CssBaseline, ThemeProvider } from "@mui/material";
import { ColorModeContext, useMode } from "./theme";

function App() {
  const [theme, colorMode] = useMode();

  return (
    <ColorModeContext.Provider value={colorMode}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Routes>
          {/* 独立路由：无侧边栏/顶栏 */}
          <Route path="/" element={<SignUp/>}/>
          <Route path="/login" element={<LogIn/>}/>
          
          {/* 布局路由：所有业务页面都嵌套在Layout下 */}
          <Route element={<Layout />}>
            <Route path="/home" element={<Home/>}/>
            <Route path="/page1" element={<Page1/>}/>
            {/* 后续新增的业务页面都在这里添加 */}
          </Route>
        </Routes>
      </ThemeProvider>
    </ColorModeContext.Provider>
  )
}

export default App

关键说明 #

• Outlet是react-router-dom提供的组件，用于渲染当前路由的子路由内容，相当于布局里的"占位符"
• 所有需要显示Sidebar/Topbar的页面，都嵌套在<Route element={<Layout />}>下，无需重复编写侧边栏和顶栏代码
• 登录/注册页面作为顶级路由，直接渲染组件，不会触发Layout的渲染，自然就不会显示侧边栏和顶栏

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