Home > database >  Matched leaf route at location "/Gallary" does not have an element
Matched leaf route at location "/Gallary" does not have an element

Time:04-28

I am Trying to reach the <Gallery/> Component using a Menu button with React-Router Link so the code is for the Menu

Menu.jsx

import { Link } from 'react-router-dom';

export default function Menu({ menuOpen, setMenuOpen }) {
  return (
    <div className={"menu "   (menuOpen && "active")}>
      <ul>

        <li onClick={() => setMenuOpen(false)}>
          <Link to="/">Home Page</Link>
        </li>
        <li onClick={() => setMenuOpen(false)}>
          <Link to="/Gallery">Gallery</Link>
        </li>
   </ul>
    </div>
  );
}

and the code for APP.jsx:

import './App.scss';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { useState } from 'react';
import Gallery from './components/Gallery/Gallery';
import Menu from './components/menu/Menu';
import Topbar from './components/topbar/Topbar';
import FooterComp from './components/Footer/FooterComp';

const App = () => {
  const [menuOpen, setMenuOpen] = useState(false);


  return (
    <>
      <Router>
        <Topbar menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
        <Menu menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/Gallery" elemtent={<Gallery />} />
        </Routes>

        <FooterComp />
      </Router>
    </>
  )
}

export default App

When I click the button which is supposed to route to the <Gallery/> Component it routes to an empty component and this warning is displayed in the console

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

I searched for this problem and only router-dom version related fixes are there and you can see I'm using the correct v6 props and components.

CodePudding user response:

You have a typo. element

Change

<Route path="/Gallery" elemtent={<Gallery />} />

to

<Route path="/Gallery" element={<Gallery />} />

  • Related