How to handle components with different routes in 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 (i.e. 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 element={<SidebarLayout />}>
          <Route path="/page3" element={<Page3 />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;