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

 
        
        

          } />
          } />
          } />
          } />
          } />
          } />
          {/* Redirect to their dashboard */}
          } />
          } />
          {/* admin pages */}
          }>
          } />
          } />

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 (
    
      
        
          }>
            Admin
          
          
            
            
                
                  ALL USER
                
                
                
              
                
                  Add Project
                
                
              
              
                
                  Logout
                
                
              
            
          
          
          
            
              Evalue Content portal
            
          
        
      
           //using Outlet to render the child component 
    
  )
}

export default Admin

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

Update:

after implement , 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 > it worked but one catch was the child content shown below the admin menu


can you please tell me how to fix this

user_10129053 · Answer

I would look at doing your nested routes like this

}>
    } />
    } />

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

An 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.

user_8690857 · Answer

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 */}
} />
} />
} />

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 (
    <>
      
        
          
            }>
              Admin
            
            
              .....
            
            
            
              .....
            
          
        
      
       // <-- render Outlet for nested routes
    
  )
}

export default Admin;

If using absolute routing:
```
{/* admin pages */}
}>
  } />
  } />
```
If using relative routing then omit the leading "/" character and adjust the nested paths.
```
{/* admin pages */}
}>
  } />
  } />
```

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

2 Answers

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