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

这两个路由同时呈现，因此也同时呈现任何匹配的路由.

每个Reaction应用程序只需要一台路由.重构代码，使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>
  );
}

代码拆分

您将创建could个返回JSX的函数

示例:

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

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

export default Global;

const adminRoutes = () => (
  <Route
    element={(
      <ThemeProvider>
        <SidebarProvider>
          <Admin />
        </SidebarProvider>
      </ThemeProvider>
    )}
  >
    <Route element={<BaseLayout />}>
      <Route path="/admin" element={<DashboardScreen />} />
      <Route path="*" element={<PageNotFound />} />
    </Route>
  </Route>
);

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

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          {globalRoutes()}
          {adminRoutes()}
        </Routes>
      </BrowserRouter>
    </div>
  );
}

更好的做法是直接呈现根级路由，其中每个被路由的组件呈现101路由(Routed components that render another 100 component and set of routes).基本上，每条路由都是一种"命名空间".

示例:

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

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

export default Global;

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 (
    <>
      <Routes>
        <Route element={<BaseLayout />}>
          <Route path="/" element={<DashboardScreen />} /> // <-- "/admin"
          <Route path="*" element={<PageNotFound />} />
        </Route>
      </Routes>
      <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={<Global />} />
          <Route
            path="/admin/*"
            element={(
              <ThemeProvider>
                <SidebarProvider>
                  <Admin />
                </SidebarProvider>
              </ThemeProvider>
            )}
          />
        </Routes>
      </BrowserRouter>
    </div>
  );
}