title: how could I fix this mistake of routes in react
body: <p>I'm getting this warning and I can't see my routes except the &quot;/&quot; with contains &quot;Default Page Content}&quot; inside the App.js. How could i rewrite the code that contains the other routes ?</p>
  <h1>Matched leaf route at location &quot;/admin&quot; does not have an element. This means it will render an  with a null value by default resulting in an &quot;empty&quot; page</h1>
  <p>Im using :
  &quot;react&quot;: &quot;^17.0.2&quot;,
  &quot;react-dom&quot;: &quot;^17.0.2&quot;,
  &quot;react-router-dom&quot;: &quot;^6.0.2&quot;,</p>
  <p>App.js</p>
  <pre><code>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 (
      &lt;div className=&quot;App&quot;&gt;
   &lt;Router&gt;
        
          &lt;Routes&gt;
          &lt;Route path=&quot;/&quot; element={&lt;div&gt;Default Page Content&lt;/div&gt;}/&gt;
          &lt;Route  path=&quot;/admin&quot; name=&quot;Admin&quot; render={(props) =&gt; &lt;MasterLayout {...props} /&gt;}/&gt;  
          &lt;/Routes&gt;
        
         
      &lt;/Router&gt;
  
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <h1>Route.js</h1>
  <pre><code>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;
  </code></pre>
  <h1>MasterLayout.js</h1>
  <pre><code>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 = () =&gt; {
  
      return (
          &lt;div className=&quot;sb-nav-fixed&quot;&gt;
              &lt;Navbar /&gt;
              &lt;div id=&quot;layoutSidenav&quot;&gt;
                  &lt;div id=&quot;layoutSidenav_nav&quot;&gt;
                      &lt;Sidebar /&gt;
                  &lt;/div&gt;
                  &lt;div id=&quot;layoutSidenav_content&quot;&gt;
                      &lt;main&gt;
                      &lt;Router&gt;
                          &lt;Routes&gt;
                              {routes.map((route, idx) =&gt; {
  
                                  return (
  
                                      route.component &amp;&amp; (
  
                                          &lt;Route
  
                                              key={idx}
                                              path={route.path}
                                              exact={route.exact}
                                              name={route.name}
                                              render={(props) =&gt; (
                                                  &lt;route.component {...props} /&gt;
                                              )}
                                          /&gt;
                                      )
  
                                  )
  
                              })}
                          &lt;/Routes&gt;
                          &lt;/Router&gt;
                          &lt;Navigate from=&quot;/admin&quot; to=&quot;/admin/dashboard&quot;/&gt;
  
                      &lt;/main&gt;
  
                      &lt;Footer /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
  
  
      )
  }
  
  export default MasterLayout;
  </code></pre>
  <p>#Dashboard.js #</p>
  <pre><code>import React from 'react'
  
  function Dashboard() {
  
      return (
          &lt;h1&gt;I am dashboard&lt;/h1&gt;
      );
  
  }
  
  export default Dashboard;
  </code></pre>
  <h1>Profile.js</h1>
  <pre><code>import React from 'react'
  
  function Profile() {
  
      return (
          &lt;h1&gt;I am Profile&lt;/h1&gt;
      );
  
  }
  
  export default Profile;
  </code></pre>
  <h1>Index.js</h1>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  import reportWebVitals from './reportWebVitals';
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;App/&gt;
    &lt;/React.StrictMode&gt;,
    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();
  </code></pre>