reactjs - 如何在 React JS 中处理具有不同路由的组件

Question

我已经构建了一个包含 3 页 Page1、Page2、Page3 并具有 Navbar 和 Sidebar 组件的 React 应用程序。并使用 react-router v6 渲染组件。

我想要所有页面上的导航栏组件和仅第 3 页上的侧边栏，我能够在所有页面上呈现导航栏，但我如何才能在第 3 页上仅显示侧边栏？？？？？

切记不要直接在page3中使用Sidebar组件。

代码和图片如下:

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Page1 from "./pages/page1/Page1";
import Page2 from "./pages/page2/Page2";
import Page3 from "./pages/page3/Page3";
import Navbar from "./components/navbar/Navbar";
import Sidebar from "./components/sidebar/Sidebar";

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      </Routes>
    </Router>
  );
}

export default App;

Answer 1

元素 将任何有效的 JSX 作为值。在 RRDv6 中，通常使用包装器组件来呈现多个组件或提供仅在特定路由上需要的额外逻辑/UI。在这种情况下，您可以使用 React Fragment 来包装 Sidebar 和 Page3 组件。

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Page1 from "./pages/page1/Page1";
import Page2 from "./pages/page2/Page2";
import Page3 from "./pages/page3/Page3";
import Navbar from "./components/navbar/Navbar";
import Sidebar from "./components/sidebar/Sidebar";

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route
          path="/page3"
          element={(
            <>
              <Sidebar />
              <Page3 />
            </>
          )}
        />
      </Routes>
    </Router>
  );
}

export default App;

一种更常见的方法是将其抽象为布局包装器组件，该组件可以包装任何路由组件并另外呈现侧边栏。当您想要在多个地方执行上述操作并且想要减少代码重复(即让代码更DRY)时，这会很有帮助。嵌套的 Route 组件呈现到 Outlet 中。

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

const SidebarLayout = () => (
  <>
    <Sidebar />
    <Outlet />
  </>
);

...

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Page1 from "./pages/page1/Page1";
import Page2 from "./pages/page2/Page2";
import Page3 from "./pages/page3/Page3";
import Navbar from "./components/navbar/Navbar";
import SidebarLayout from "./components/sidebar/SidebarLayout";

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route element={<SidebarLayout />}>
          <Route path="/page3" element={<Page3 />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;