位置“/Gallary”的匹配叶路由没有元素

Question

我正在尝试使用带有 React-Router 的菜单按钮访问 <Gallery/> 组件 Link 所以代码用于菜单

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

和 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

当我单击应该路由到 <Gallery/> 组件的按钮时，它路由到一个空组件，并且此警告显示在控制台中

位置“/Gallery”处的匹配叶路由没有元素。这意味着默认情况下它将呈现具有空值的 an ，从而导致“空”页面。

我搜索了这个问题，只有 router-dom 版本相关的修复在那里，你可以看到我使用了正确的 v6 属性和组件。

Answer 1

你打错了。 element

改变

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

至

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

位置“/Gallary”的匹配叶路由没有元素

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

reactjs

react-router

react-router-dom