Nested Route not working in react router dom for my admin dashboard

Question

I have an admin dashboard and I Implemented it nested Route successfully But its does not render the page. when I click it shows this It change the URL but not render the page

How i fix this, if anyone know please tell me

App.js

 <Router>
        <Navbar />
        <Routes>

          <Route exact path="/" element={<Home />} />
          <Route exact path="/service" element={<Service />} />
          <Route exact path="/contact" element={<Contact />} />
          <Route exact path="/login" element={<Login />} />
          <Route exact path="/reset" element={<Reset />} />
          <Route exact path="/reset/:token" element={<Newpassword />} />
          {/* Redirect to their dashboard */}
          <Route exact path="/employee" element={<Employee />} />
          <Route exact path="/publisher" element={<Publisher />} />
          {/* admin pages */}
          <Route  path="/admin" element={<Admin />}>
          <Route  path="/admin/project" element={<Project />} />
          <Route   path="/admin/user" element={<User />} />
          </Route>
        </Routes>
      </Router>

Admin.js

import React from 'react'
import { CDBSidebar, CDBSidebarContent, CDBSidebarHeader, CDBSidebarFooter, CDBSidebarMenu, CDBSidebarMenuItem } from "cdbreact"
import { NavLink, Outlet } from 'react-router-dom';
import "./AllStyle.css"

const Admin = () => {



  return (
    <div>
      <div style={{ display: 'flex', height: '100vh', overflow: 'scroll initial' }}>
        <CDBSidebar textColer="#fff" backgroundColor="rgb(0,7,61)">
          <CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}>
            <h4>Admin</h4>
          </CDBSidebarHeader>
          <CDBSidebarContent className="sidebar-content">
            <CDBSidebarMenu>
            <NavLink  to="/admin/user">
                <CDBSidebarMenuItem icon="portrait">
                  ALL USER
                </CDBSidebarMenuItem>
                <hr></hr>
                </NavLink>
              <NavLink  to="/admin/project">
                <CDBSidebarMenuItem icon="file-contract">
                  Add Project
                </CDBSidebarMenuItem>
                <hr></hr>
              </NavLink>
              <NavLink  to="/login">
                <CDBSidebarMenuItem icon="sign-out-alt">
                  Logout
                </CDBSidebarMenuItem>
                <hr></hr>
              </NavLink>
            </CDBSidebarMenu>
          </CDBSidebarContent>
          <hr></hr>
          <CDBSidebarFooter style={{ textAlign: 'center' }}>
            <div className="sidebar-btn-wrapper" style={{ padding: '20px 5px' }}>
              Evalue Content portal
            </div>
          </CDBSidebarFooter>
        </CDBSidebar>
      </div>
      <Outlet />     //using Outlet to render the child component 
    </div>
  )
}

export default Admin

i want to implement that, if click the user then render the user component inside the admin dashboard

Update:

after implement <Outlet/>, URL changed but did not showing content for child component But I see the error in the console.

Warning: Failed prop type: ForwardRef: prop type `toggled` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.

if anyone know please tell me how to fix this Typo error

Update 2:

after using <Outlet> it worked but one catch was the child content shown below the admin menu

can you please tell me how to fix this

Have you added yourself an `` ?? https://reactrouter.com/docs/en/v6/api#outlet — mrpbennett, Mar 28 '22 at 08:52
Am I wrong but your link goes to admin/user and this route goes to User.js. Maybe there is something wrong with User.js. And are there error messages in the console? — krani, Mar 28 '22 at 08:48
no, not added `` and also if I do not use `App.js` `admin/user` then It will give error in the console `Uncaught Error: Absolute route path "/project" nested under path "/admin" is not valid. An absolute child route path must start with the combined path of all its parent routes.` — vinod sharma, Mar 28 '22 at 16:57

score 3 · Answer 1 · answered Mar 28 '22 at 08:58

I would look at doing your nested routes like this

<Route  path="admin" element={<Admin />}>
    <Route  path="project" element={<Project />} />
    <Route  path="user" element={<User />} />
</Route>

I also can't see but it seems that you might not have an <Outlet> which is where the nested route will be displayed.

An <Outlet> should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered. If the parent route matched exactly, it will render a child index route or nothing if there is no index route.

Drew Reese · Answer 2 · 2022-03-28T17:09:56.793

0

Issues

The Admin component appears to be missing an Outlet component for the nested routes, or the routes need to be unnested since they are using absolute paths.

Solutions

Use a flat list of routes, i.e. no nesting of `Route` components

If using absolute paths just unnest the other admin routes.

{/* admin pages */}
<Route path="/admin" element={<Admin />} />
<Route path="/admin/project" element={<Project />} />
<Route path="/admin/user" element={<User />} />

Use nested `Route` components and an `Outlet` component for them to be rendered into

If wanting to nest the routes then the Admin component necessarily needs to render an Outlet component for the nested routes to be rendered into.

import React from 'react';
import {
  CDBSidebar,
  CDBSidebarContent,
  CDBSidebarHeader,
  CDBSidebarFooter,
  CDBSidebarMenu,
  CDBSidebarMenuItem
} from "cdbreact";
import { NavLink, Outlet } from 'react-router-dom'; // <-- import Outlet
import "./AllStyle.css";

const Admin = () => {
  return (
    <>
      <div>
        <div style={{ display: 'flex', height: '100vh', overflow: 'scroll initial' }}>
          <CDBSidebar textColer="#fff" backgroundColor="rgb(0,7,61)">
            <CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}>
              <h4>Admin</h4>
            </CDBSidebarHeader>
            <CDBSidebarContent className="sidebar-content">
              .....
            </CDBSidebarContent>
            <hr></hr>
            <CDBSidebarFooter style={{ textAlign: 'center' }}>
              .....
            </CDBSidebarFooter>
          </CDBSidebar>
        </div>
      </div>
      <Outlet /> // <-- render Outlet for nested routes
    </>
  )
}

export default Admin;

If using absolute routing:

{/* admin pages */}
<Route path="/admin" element={<Admin />}>
  <Route path="/admin/project" element={<Project />} />
  <Route path="/admin/user" element={<User />} />
</Route>

If using relative routing then omit the leading "/" character and adjust the nested paths.

{/* admin pages */}
<Route path="/admin" element={<Admin />}>
  <Route path="project" element={<Project />} />
  <Route path="user" element={<User />} />
</Route>

edited Mar 28 '22 at 17:09

answered Mar 28 '22 at 15:44

Drew Reese

165,259
14
153
181

can you tell me, Which Stemp I follow to implement ``. I new in react so I don't know about `` – vinod sharma Mar 28 '22 at 17:07
@vinodsharma I updated my answer to more clearly separate the two suggested solutions. If you want to use an `Outlet` use the second solution. Import the `Outlet` from RRD and render it in the `Admin` component where you want the nested routes to be rendered out to the UI. – Drew Reese Mar 28 '22 at 17:12
can you check my question again I updated my question after implementing ` it will render not in the body but in the footer section (I attached photo). how can I fix that – vinod sharma Mar 29 '22 at 06:42
@vinodsharma Can you edit your question to include the relavent code where a footer section is rendered, and the content being rendered into it? – Drew Reese Mar 29 '22 at 06:54
hey @drewreese can you see my **update2** I updated the image you can now understand better what I trying to tell – vinod sharma Mar 29 '22 at 09:09
You need to understand your layout, you place the `` where you want the content to be displayed. If it's in the wrong place it shows you don't really understand your layouts. – mrpbennett Mar 29 '22 at 12:59
@vinodsharma I did see that update, but that output doesn't match any of the code snippets you've shared. Like mrpbennett says, you need to render the `Outlet` component precisely where you want the routes, i.e. content, to be rendered in the DOM. In my answer I placed it *outside* any of the `CDBSidebar` components. Where is the "I want to show the child content here" component/element? – Drew Reese Mar 29 '22 at 16:09
@mrpbennett @drewreese I understand what `Outlet` men but now how I can archive To show Child component content (which place I mention in the image). I don't know,how to implement – vinod sharma Mar 30 '22 at 07:25
@vinodsharma Can you update your question to include the code where you are using the `Outlet` so we can see where you are rendering out the route content? – Drew Reese Mar 30 '22 at 07:34
@drewreese check my `Admin.js` I updated to indicate where I use `Outlet` – vinod sharma Mar 30 '22 at 08:11
if you were to replace the `` with a div and some text. Where does it display? How have you set up your layout? – mrpbennett Mar 30 '22 at 13:43
@vinodsharma In the screenshot you are rendering some text "I want to show the child content hear", where is ***that*** component/element? This is where you want to place the `Outlet` component (*or render the routes*). From what I can tell, this is outside the `Admin` component if all it's rendering is the sidebar. Instead of us guessing or playing 20 questions, can you just edit your question to provide a complete and comprehensive code example so we can see *exactly* what it's doing? Could you also try creating a *running* codesandbox of your code that we can inspect live? – Drew Reese Mar 30 '22 at 16:05

Nested Route not working in react router dom for my admin dashboard

2 Answers2

Issues

Solutions

Use a flat list of routes, i.e. no nesting of Route components

Use nested Route components and an Outlet component for them to be rendered into

Use a flat list of routes, i.e. no nesting of `Route` components

Use nested `Route` components and an `Outlet` component for them to be rendered into