how could I fix this mistake of routes in react

Question

I'm getting this warning and I can't see my routes except the "/" with contains "Default Page Content}" inside the App.js. How could i rewrite the code that contains the other routes ?

Matched leaf route at location "/admin" does not have an element. This means it will render an with a null value by default resulting in an "empty" page

Im using : "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^6.0.2",

App.js

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Switch,Routes, Route,Swit } from 'react-router-dom';

import MasterLayout from '../src/assets/layouts/admin/MasterLayout'

function App() {
  return (
    <div className="App">
 <Router>
      
        <Routes>
        <Route path="/" element={<div>Default Page Content</div>}/>
        <Route  path="/admin" name="Admin" render={(props) => <MasterLayout {...props} />}/>  
        </Routes>
      
       
    </Router>

    </div>
  );
}

export default App;

Route.js

import Dashboard from '../assets/components/admin/Dashboard';
import Profile from '../assets/components/admin/Profile';


const routes = [
{path:'/admin',exact:true,name:'Admin'},
{path:'/admin/dashboard',exact:true,name:'Dashboard',component: Dashboard},
{path:'/admin/profile',exact:true,name:'Profile',component: Profile},

];


export default routes;

MasterLayout.js

import React from 'react';
import { Navigate } from 'react-router-dom';

import { BrowserRouter as Router, Switch, Routes, Route, Swit } from 'react-router-dom';

import '../../admin/js/scripts.js'
import '../../admin/css/styles.css'

import Navbar from './Navbar.js';
import Sidebar from './Sidebar.js';
import Footer from './Footer.js';
import routes from '../../../routes/routes';



const MasterLayout = () => {

    return (
        <div className="sb-nav-fixed">
            <Navbar />
            <div id="layoutSidenav">
                <div id="layoutSidenav_nav">
                    <Sidebar />
                </div>
                <div id="layoutSidenav_content">
                    <main>
                    <Router>
                        <Routes>
                            {routes.map((route, idx) => {

                                return (

                                    route.component && (

                                        <Route

                                            key={idx}
                                            path={route.path}
                                            exact={route.exact}
                                            name={route.name}
                                            render={(props) => (
                                                <route.component {...props} />
                                            )}
                                        />
                                    )

                                )

                            })}
                        </Routes>
                        </Router>
                        <Navigate from="/admin" to="/admin/dashboard"/>

                    </main>

                    <Footer />
                </div>
            </div>

        </div>



    )
}

export default MasterLayout;

#Dashboard.js #

import React from 'react'

function Dashboard() {

    return (
        <h1>I am dashboard</h1>
    );

}

export default Dashboard;

Profile.js

import React from 'react'

function Profile() {

    return (
        <h1>I am Profile</h1>
    );

}

export default Profile;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: 
reportWebVitals();

Answer 1

In react-router-dom version 6 the Route component API changed significantly, there are no longer component or render props. They were replaced by the element prop that renders a JSX literal, not a reference to a React component or a function returning JSX.

Matched leaf route at location "/admin" does not have an element. This means it will render an with a null value by default resulting in an "empty" page.

The MasterLayout component isn't being rendered as JSX on the element prop.

App

Fix how the MasterLayout component is rendered by the Route.

<Router>
  <Routes>
    <Route path="/" element={<div>Default Page Content</div>} />
    <Route path="/admin" element={<MasterLayout />} />  
  </Routes>
</Router>

MasterLayout

Remove the extraneous Router, you need only one in the entire app. Render the routes into the element prop as JSX. Fix the redirect to be rendered into a Route on the "/admin" path within the Routes.

const MasterLayout = () => (
  <div className="sb-nav-fixed">
    <Navbar />
    <div id="layoutSidenav">
      <div id="layoutSidenav_nav">
        <Sidebar />
      </div>
      <div id="layoutSidenav_content">
        <main>
          <Routes>
            {routes.filter(route => route.component)
              .map(({ path, component: Component }, idx) => (
                <Route
                  key={idx}
                  path={path}
                  element={<Component />}
                />
              ))}
            <Route
              path="/admin"
              element={<Navigate to="/admin/dashboard"/>}
            />
          </Routes>
        </main>
        <Footer />
      </div>
    </div>
  </div>
);

Answer 2

React Router 6 gives us a very powerful feature (Nested Routes). This enables us to change URLs in the browser for different routes/links and instead of replacing the entire page only the content of the new tab/link gets replaced. In order to use Nested Routes here, you can simply remove the Routes/routes.js file delete the import statement from App.js too and change your App.js file to the following

import React from 'react';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';

import MasterLayout from './layouts/admin/MasterLayout';
import Dashboard from './components/admin/Dashboard';
import Profile from './components/admin/Profile';

    function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
        <Route path="/admin" element={<MasterLayout />} > 
        <Route path='/admin/dashboard' element={<Dashboard />}/>
        <Route path='/admin/profile' element={<Profile />}/>
        </Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

Then add Outlet to the MasterLayout.js file in the following order to enable it render and replace it's content with the matching nested routes content.

import React from 'react';
import {Outlet, Navigate} from 'react-router-dom';
import '../../assets/admin/css/styles.css';
import '../../assets/admin/js/scripts.js';

import Footer from './Footer';
import Navbar from './Navbar';
import Sidebar from './Sidebar';



const MasterLayout = ()=>{
    return (
        <div className="sb-nav-fixed">
            <Navbar/>

            <div id="layoutSidenav">
                <div id="layoutSidenav_nav">
                    <Sidebar/>
                </div>

                <div id="layoutSidenav_content">
                <main>
                    <Outlet/>
                    <Navigate from="admin" to="/admin/dashboard"/> 

                </main>
                <Footer/>
                </div>
            </div>    
        </div>

    );
}

export default MasterLayout;

I hope this helps those of us using the react-router-dom v-6 and above.