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();

CodePudding user response：

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>
);