有没有办法解决路由之间相互影响的组合？

Question

我有全局文件，其中包含以下路线：

// global.tsx
import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import LoginPage from "../../pages/Authentication/Login";
import SignupPage from "../../pages/Authentication/Signup";

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

export default Global;

还有另一个名为 Admin 的文件，其中包含这些路由：

import React, { useContext, useEffect } from "react";
import "../../styles/App.scss";
import { ThemeContext } from "../../context/ThemeContext";
import { DARK_THEME, LIGHT_THEME } from "../../constants/themeConstants";
import { BrowserRouter as Router, Routes, 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 Admin = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);
  console.log(theme);
  useEffect(() => {
    if (theme === DARK_THEME) {
      document.body.classList.add("dark-mode");
    } else {
      document.body.classList.remove("dark-mode");
    }
  }, [theme]);
  return (
    <>
    <Router>
      <Routes>
        <Route element={<BaseLayout/>}>
          <Route path="/admin" element={<DashboardScreen />}></Route>
          <Route path="*" element={<PageNotFound/>}></Route>
        </Route>
      </Routes>
      <button type="button" 
      className="theme-toggle-btn"
      onClick={toggleTheme}
      >
        <img src={theme === LIGHT_THEME ? SunIcon: MoonIcon} alt="" className="theme-icon" />
      </button>
    </Router>
    </>
  );
};

export default Admin;

然后将它们合并到一个文件中：

// import "./App.scss";
import { SidebarProvider } from "./context/SidebarContext";
import { ThemeProvider } from "./context/ThemeContext";

import Admin from "./routes/admin/Admin";
import Global from "./routes/global/Global";

function App() {
  return (
    <div className="App">
      <Global />

      <ThemeProvider>
        <SidebarProvider>
          <Admin></Admin>
        </SidebarProvider>
      </ThemeProvider>
    </div>
  );
}

export default App;

发生的情况是，管理路由器的侧边栏出现了全局组件的登录或注册页面，尽管侧边栏来自不同路由器中的管理文件，如下图所示：

我尝试了很多次，用不同的方式通过调整路线来将它们分开，但我做不到。必须有一种方法可以让侧边栏不会显示路线，尽管侧边栏本身是不同的路线

Answer 1

两个路由器同时渲染，因此也会同时渲染任何匹配的路由。

每个 React 应用程序只需要一个路由器。重构代码，以便

App

呈现单个必要的

Router

组件，并在处理路由匹配的单个

Routes

组件下呈现所有路由。

示例：

将

Admin

更新为布局路由组件，为其嵌套路由渲染

Outlet

。

import { Outlet } from 'react-router-dom';

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

  console.log(theme);

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

  return (
    <>
      <Outlet />
      <button
        type="button" 
        className="theme-toggle-btn"
        onClick={toggleTheme}
      >
        <img
          src={theme === LIGHT_THEME ? SunIcon : MoonIcon}
          alt=""
          className="theme-icon"
        />
      </button>
    </>
  );
};

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

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<LoginPage />} />
          <Route path="/signup" element={<SignupPage />} />
          <Route
            element={(
              <ThemeProvider>
                <SidebarProvider>
                  <Admin />
                </SidebarProvider>
               </ThemeProvider>
            )}
          >
            <Route element={<BaseLayout />}>
              <Route path="/admin" element={<DashboardScreen />} />
              <Route path="*" element={<PageNotFound />} />
            </Route>
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}