react js中如何处理不同路由的组件

Question

I have build an react app with 3pages Page1,Page2,Page3 and have Navbar and Sidebar component. And using react-router v6 for rendering components.

I want the Navbar component on all of the pages and Sidebar on only page3, i am able to render navbar on all the pages but how i can show only sidebar on the page3?????

Remember not to use Sidebar component direct in the page3.

Here is code and picture:

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

To pass multiple components to one Route and show them in that path, you can put those components in an array and give this array to the element prop in <Route/> .

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;

With this, in the /page2 URL, you can access both components and then you can layout them

Answer 2

The element takes any valid JSX as a value. In RRDv6 it's common to use wrapper components to render multiple components or provide additional logic/UI you want only on specific routes. In this case you can use a React Fragment to wrap the Sidebar and Page3 components.

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;

A more common approach would be to abstract this into a layout wrapper component that can wrap any routed component and additionally render a sidebar. This is helpful when you want to do the above in more than one place and you want to reduce code duplication ( ie make the code more DRY ). Nested Route components are rendered into an 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;