I am expecting to see the content in the page but not seeing any content and not getting any errors. I am using react-router v6.

import React from 'react'; import { Routes, Route, Outlet, Link } from "react-router-dom"; import { MDBContainer, MDBNavbar, MDBNavbarBrand, MDBNavbarToggler, MDBIcon, MDBNavbarNav, MDBNavbarItem, MDBNavbarLink, MDBBtn, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBDropdownLink, MDBCollapse } from 'mdb-react-ui-kit'; /*function App() { return ( https://mdbootstrap.com/img/logo/mdb-transparent-250px.png' style={{ width: 250, height: 90 }} /> Thank you for using our product. We're glad you're with us. MDB Team

export default App;*/ export default function App() { return (

Basic Example

  <p>
    This example demonstrates some of the core features of React Router
    including nested <code>&lt;Route&gt;</code>s,{" "}
    <code>&lt;Outlet&gt;</code>s, <code>&lt;Link&gt;</code>s, and using a
    "*" route (aka "splat route") to render a "not found" page when someone
    visits an unrecognized URL.
  </p>

  {/* Routes nest inside one another. Nested route paths build upon
        parent route paths, and nested route elements render inside
        parent route elements. See the note about <Outlet> below. */}
  <Routes>
    <Route path="/" element={<Layout />}>
      <Route index element={<Home />} />
      <Route path="about" element={<About />} />
      <Route path="dashboard" element={<Dashboard />} />

      {/* Using path="*"" means "match anything", so this route
            acts like a catch-all for URLs that we don't have explicit
            routes for. */}
      <Route path="*" element={<NoMatch />} />
    </Route>
  </Routes>
</div>

); }

function Layout() { return (

{/* A "layout route" is a good place to put markup you want to // share across all the pages on your site, like navigation. */}

  <MDBNavbar expand='lg' light bgColor='light'>
  <MDBContainer fluid>
    <MDBNavbarBrand href='#'>Brand</MDBNavbarBrand>

    <MDBNavbarToggler
      aria-controls='navbarSupportedContent'
      aria-expanded='false'
      aria-label='Toggle navigation'
      onClick={() => setShowBasic(!showBasic)}
    >
      <MDBIcon icon='bars' fas />
    </MDBNavbarToggler>

    <MDBCollapse navbar show={showBasic}>
      <MDBNavbarNav className='mr-auto mb-2 mb-lg-0'>
        <MDBNavbarItem>
          <MDBNavbarLink active aria-current='page' href='#'>
            Home
          </MDBNavbarLink>
        </MDBNavbarItem>
        <MDBNavbarItem>
          <MDBNavbarLink href='#'>Link</MDBNavbarLink>
        </MDBNavbarItem>

        <MDBNavbarItem>
          <MDBDropdown>
            <MDBDropdownToggle tag='a' className='nav-link'>
              Dropdown
            </MDBDropdownToggle>
            <MDBDropdownMenu>
              <MDBDropdownItem>
                <MDBDropdownLink>Action</MDBDropdownLink>
              </MDBDropdownItem>
              <MDBDropdownItem>
                <MDBDropdownLink>Another action</MDBDropdownLink>
              </MDBDropdownItem>
              <MDBDropdownItem>
                <MDBDropdownLink>Something else here</MDBDropdownLink>
              </MDBDropdownItem>
            </MDBDropdownMenu>
          </MDBDropdown>
        </MDBNavbarItem>

        <MDBNavbarItem>
          <MDBNavbarLink disabled href='#' tabIndex={-1} aria-disabled='true'>
            Disabled
          </MDBNavbarLink>
        </MDBNavbarItem>
      </MDBNavbarNav>

      <form className='d-flex input-group w-auto'>
        <input type='search' className='form-control' placeholder='Type query' aria-label='Search' />
        <MDBBtn color='primary'>Search</MDBBtn>
      </form>
    </MDBCollapse>
  </MDBContainer>
</MDBNavbar>


  {/* An <Outlet> renders whatever child route is currently active,
     // so you can think about this <Outlet> as a placeholder for
     // the child routes we defined above. */}
  <Outlet />
  </div>

); }

function Home() { return ( col="4" col="4" col="4" sm="4" sm="4" sm="4" md="4" md="4" md="4" lg="4" lg="4" lg="4" xl="4" xl="4" xl="4" ); }

function About() { return (

About

function Dashboard() { return (

Dashboard

function NoMatch() { return (

Nothing to see here!

Go to the home page