React Router多路由冲突求助：侧边栏异常显示在登录页

问题根源 #

你同时渲染了两个<Router>组件，它们会独立渲染各自的路由内容——Admin中的BaseLayout（包含侧边栏）和主题切换按钮会始终出现在DOM中，不受Global路由的影响。React Router的设计逻辑是整个应用仅需一个Router管理路由状态，多个Router会导致渲染冲突。

解决方案：整合路由结构，使用单一Router #

以下是具体修改步骤：

1. 重构Global路由组件（移除内部Router）

将global.tsx改为仅返回公共路由元素：

import React from "react";
import { Route } from "react-router-dom";
import LoginPage from "../../pages/Authentication/Login";
import SignupPage from "../../pages/Authentication/Signup";

const GlobalRoutes = () => {
  return (
    <>
      <Route path="/" element={<LoginPage />} />
      <Route path="/signup" element={<SignupPage />} />
    </>
  );
};

export default GlobalRoutes;

2. 重构Admin路由组件（移除内部Router）

将Admin.tsx改为返回后台路由结构，同时把主题切换逻辑限定在后台路由范围内：

import React, { useContext, useEffect } from "react";
import "../../styles/App.scss";
import { ThemeContext } from "../../context/ThemeContext";
import { DARK_THEME, LIGHT_THEME } from "../../constants/themeConstants";
import { Route } from 'react-router-dom'
import MoonIcon from '../../assets/icons/moon.svg';
import SunIcon from '../../assets/icons/sun.svg';
import BaseLayout from "../../layout/BaseLayout";
import DashboardScreen from "../../screens/Dashboard/DashboardScreen";
import PageNotFound from "../../screens/error/PageNotFound";

const AdminRoutes = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  useEffect(() => {
    document.body.classList.toggle("dark-mode", theme === DARK_THEME);
  }, [theme]);

  return (
    <>
      {/* 后台路由嵌套BaseLayout（带侧边栏） */}
      <Route element={<BaseLayout />}>
        <Route path="/admin" element={
          <>
            <DashboardScreen />
            {/* 仅后台页面显示主题切换按钮 */}
            <button
              type="button" 
              className="theme-toggle-btn"
              onClick={toggleTheme}
            >
              <img
                src={theme === LIGHT_THEME ? SunIcon : MoonIcon}
                alt="切换主题"
                className="theme-icon"
              />
            </button>
          </>
        } />
      </Route>
      <Route path="*" element={<PageNotFound />} />
    </>
  );
};

export default AdminRoutes;

3. 修改App组件：使用单一Router整合所有路由

将所有路由放在同一个Router下，用上下文包裹需要的后台路由：

import { BrowserRouter as Router, Routes } from "react-router-dom";
import { SidebarProvider } from "./context/SidebarContext";
import { ThemeProvider } from "./context/ThemeContext";

import AdminRoutes from "./routes/admin/AdminRoutes";
import GlobalRoutes from "./routes/global/GlobalRoutes";

function App() {
  return (
    <div className="App">
      <Router>
        <ThemeProvider>
          <Routes>
            {/* 公共路由：无侧边栏、无主题按钮 */}
            <GlobalRoutes />
            
            {/* 后台路由：仅访问/admin路径时渲染侧边栏 */}
            <SidebarProvider>
              <AdminRoutes />
            </SidebarProvider>
          </Routes>
        </ThemeProvider>
      </Router>
    </div>
  );
}

export default App;

核心逻辑说明 #

• 单一Router管理整个应用的路由状态，避免重复渲染冲突。
• 通过嵌套路由实现路由分层：公共路由直接渲染页面，后台路由嵌套BaseLayout（带侧边栏），确保只有访问/admin路径时才加载侧边栏。
• 主题切换按钮和上下文限定在后台路由范围内，不会出现在登录/注册页面。

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