react js中如何處理不同路由的組件

Question

我已經構建了一個包含 3pages Page1、Page2、Page3 的反應應用程序，並具有導航欄和側邊欄組件。 並使用 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

要將多個組件傳遞給一個Route並在該路徑中顯示它們，您可以將這些組件放在一個數組中，並將該數組提供給<Route/>中的element prop。

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/>,<Sidebar/>]} />
        <Route path="/page3" element={<Page3 />} />
      </Routes>
    </Router>
  );
}

export default App;

有了這個，在/page2 URL 中，您可以訪問這兩個組件，然后您可以布局它們

Answer 2

該element將任何有效的 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;

一種更常見的方法是將其抽象為一個布局包裝器組件，該組件可以包裝任何路由組件並另外呈現側邊欄。 當您想在多個地方執行上述操作並且您想減少代碼重復（即使代碼更干燥）時，這很有幫助。 嵌套的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 path="/page3" element={<SidebarLayout />}>
          <Route path="/page3" element={<Page3 />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;