Javascript 由于 reactrouter，NavLinks 无法工作

长话短说，我只是想让链接起作用，但这个错误Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')一直在弹出.我确实重新安装了包，多次重组代码，重新打开Reaction，删除并添加了/个，因为它没有任何变化.这是一个如此简单的项目，但它却伴随着如此令人沮丧的错误.这是代码，希望你能看到我的眼睛看不到的东西. 我是App.js

import Category from "./components/Category";
import Pages from "./pages/Pages";
import { BrowserRouter as Router } from "react-router-dom";

function App() {
  
  return (
    <div className="App">
      <Router>
        <Category></Category>
        <Pages></Pages>
      </Router>
    </div>
  );
}

export default App;

这是Category.jsx:

import { FaPizzaSlice, FaHamburger } from "react-icons/fa";
import { GiNoodles, GiChopsticks } from "react-icons/gi";
import styled from "styled-components";
import { NavLink } from "react-router-dom";

function Category() {
  return (
    <List>
      <NavLink to={'/cuisine/Italian'}>
        <FaPizzaSlice />
        <h4>Italian</h4>
      </NavLink>
      <NavLink to={'/cuisine/American'}>
        <FaHamburger />
        <h4>American</h4>
      </NavLink>
      <NavLink to={'/cuisine/Thai'}>
        <GiNoodles />
        <h4>Thai</h4>
      </NavLink>
      <NavLink to={'/cuisine/Japanese'}>
        <GiChopsticks />
        <h4>Japanese</h4>
      </NavLink>
    </List>
  );
}

const List = styled(NavLink)`
  display: flex;
  justify-content: center;
  margin: 2rem 0rem;
`;

export default Category;

这是Pages.jsx:

import Home from "./Home";
import React from "react";
import { Route, Routes} from "react-router-dom";
//import { filterProps } from "framer-motion";
import Cuisine from "./Cuisine";

function Pages() {
  return (
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="cuisine/*" element={<Cuisine />} />
      </Routes>
  );
}

export default Pages;

我不知道还能try 什么.Thank you :)个