What am I missing here ? Reactjs-CodePudding

My main App component does not display in the browser even though no error message is displayed. Please assist

import React from 'react';
import {BrowserRouter as Routes,Route} from 'react-router-dom';
import MasterLayout from './layouts/admin/MasterLayout';

function App() {
  return (
    <div className="App">
     
           <Routes>
           
           <Route path="/admin/dashboard" component = {MasterLayout} />

           
       </Routes>
     
    
    
     
</div>

); }

export default App; I don't understand why the App main component does not render in my webpage there are no errors but the web page is empty. Please Assist me

CodePudding user response：

Seeing the code, you are not displaying any UI for main page or base router "localhost:3000/", only displaying in the "localhost:3000/admin/dashboard"

function App() {
      return (
        <div className="App">
               <Routes>
               <Route path="/admin/dashboard" component = {MasterLayout} />
           </Routes>
        </div>
     )
   }

CodePudding user response：

In version 6 for react-router-dom, it should be element instead of component, and you should call the component (<MasterLayout/>), like so:

import React from 'react';
import {BrowserRouter as Routes,Route} from 'react-router-dom';
import MasterLayout from './layouts/admin/MasterLayout';

function App() {
  return (
    <div className="App"> 
       <Routes> 
           <Route path="/admin/dashboard" element = {<MasterLayout/>} /> 
       </Routes>  
    </div>
  )
}