Question 73172 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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;
Tags:

2

Answers


  1. 0

    It looks like you have set up your routing correctly in both App.js and Home.jsx files. However, you are using nested routing in Home.jsx, which means that you need to use the Outlet component from react-router-dom to render the child routes.

    Here’s the corrected Home.jsx file:

    import React from "react";
import { BrowserRouter as Router, Routes, Route, Outlet } 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>
          <Outlet />
        </div>
        <Footer />
      </div>
    </div>
  );
};

export default Home;

    Notice that I have replaced the child routes with the Outlet component. This will render the nested routes inside the Home component.

    Also, in the App.js file, you have a typo in the path prop of the Route component for the Registeration page. You have written "registeration" instead of "registration".

    Login or Signup to reply.
  2. 0

    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;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search