Nested Routing not working in React JS using React-Router-Dom

Question

I am trying to create a Dashboard, but I am stuck at nested routing. Like I want to have the navbar, sidebar, and footer on the screen, but only the main components should change.

I have used routes in two files: App.js, and Home.jsx.

App.js:

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./pages/login/Login";
import Registeration from "./pages/registeration/Registeration";
import Home from "./pages/Home/Home";

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route
            path="/"
            element={
              <React.Fragment>
                <div className="login_page">
                  <Login />
                </div>
              </React.Fragment>
            }
          />
          <Route
            path="registeration"
            element={
              <React.Fragment>
                <div className="login_page">
                  <Registeration />
                </div>
              </React.Fragment>
            }
          />

          <Route path="home" element={<Home />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

Home.jsx:

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Assets from "../../components/assets/Assets";
import Balance from "../../components/balance/Balance";
import Dashboard from "../../components/dashboard/Dashboard";
import { Footer } from "../../components/Footer/Footer";
import Navbar from "../../components/navbar/Navbar";
import OpenAccount from "../../components/openAccount/OpenAccount";
import Sidebar from "../../components/sidebar/Sidebar";
import "./Home.scss";

const Home = () => {
  return (
    <div className="home">
      <Sidebar />
      <div className="homeContainer">
        <Navbar />
        <div>
          <Routes>
            <Route path="/balance" element={<Balance />} />
            <Route path="/" element={<Dashboard />} />
            <Route path="/assets" element={<Assets />} />
            <Route path="/open-account" element={<OpenAccount />} />
          </Routes>
        </div>
        <Footer />
      </div>
    </div>
  );
};

export default Home;

Answer 1

In your current implementation the Home component is rendering descendent routes, not nested routes. In order for descendent routes to be available to be matched and render their routed content the parent route must append a trailing wildcard "*" matcher to its path.

Example:

<Route path="home/*" element={<Home />} />

Note also that descendent routes are built relative from their parent route, so the Home routes will resolve to the following:

<Route
  path="/balance"           // <-- "/home/balance"
  element={<Balance />}
/>
<Route
  path="/"                  // <-- "/home"
  element={<Dashboard />}
/>
<Route
  path="/assets"            // <-- "/home/assets"
  element={<Assets />}
/>
<Route
  path="/open-account"      // <-- "/home/open-account"
  element={<OpenAccount />}
/>

You can also achieve the same using nested routes by converting the Home component into a layout route component. Layout routes render an Outlet component for their nested routes to render their element content into instead of directly render descendent routes.

Example:

import React from "react";
import { Outlet } from "react-router-dom";
import { Footer } from "../../components/Footer/Footer";
import Navbar from "../../components/navbar/Navbar";
import Sidebar from "../../components/sidebar/Sidebar";
import "./Home.scss";

const Home = () => {
  return (
    <div className="home">
      <Sidebar />
      <div className="homeContainer">
        <Navbar />
        <div>
          <Outlet /> // <-- nested routes render content here
        </div>
        <Footer />
      </div>
    </div>
  );
};

export default Home;

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Routes, Route, Outlet } from "react-router-dom";
import Login from "./pages/login/Login";
import Registration from "./pages/registration/Registration";
import Assets from "../../components/assets/Assets";
import Balance from "../../components/balance/Balance";
import Dashboard from "../../components/dashboard/Dashboard";
import OpenAccount from "../../components/openAccount/OpenAccount";
import Home from "./pages/Home/Home";

const LoginLayout = () => (
  <div className="login_page">
    <Outlet />
  </div>
);

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route element={<LoginLayout />}>
            <Route path="/" element={<Login />} />
            <Route path="registration" element={<Registration />} />
          </Route>
          <Route path="home" element={<Home />}>
            <Route path="balance" element={<Balance />} />
            <Route index element={<Dashboard />} />
            <Route path="assets" element={<Assets />} />
            <Route path="open-account" element={<OpenAccount />} />
          </Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;