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>

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 ponent 
    </div>
  )
}

export default Admin

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

Update:

after implement <Outlet/>, URL changed but did not showing content for child ponent 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

• javascript
• reactjs
• react-router-dom
• nested-routes

Share Follow edited Mar 30, 2022 at 8:10 TheDeveloperGuy asked Mar 28, 2022 at 8:17 TheDeveloperGuyTheDeveloperGuy 15122 gold badges55 silver badges1515 bronze badges 3

• 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 Commented Mar 28, 2022 at 8:48
• Have you added yourself an <Outlet> ?? reactrouter./docs/en/v6/api#outlet – mrpbennett Commented Mar 28, 2022 at 8:52
• no, not added <Outle> 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 bined path of all its parent routes. – TheDeveloperGuy Commented Mar 28, 2022 at 16:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

• Nested Routes
• Using an Outlet

Issues

The Admin ponent appears to be missing an Outlet ponent 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 ponents

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 ponents and an Outlet ponent for them to be rendered into

If wanting to nest the routes then the Admin ponent necessarily needs to render an Outlet ponent 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>