React Router中NavLinks失效，报Uncaught TypeError错误求助

我希望NavLinks能正常工作，但一直弹出错误：Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')。已经尝试过重新安装依赖包、多次重构代码、重启React项目、调整路径中的/，但问题仍未解决。以下是我的代码，希望能找出问题所在：

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;

问题解决方法 #

错误出在Category.jsx中：你将包裹导航链接的容器组件List基于NavLink进行样式化，但这个容器本身不需要路由导航功能。NavLink依赖路由上下文提供的location对象，作为容器的List没有被传递相关路由props，因此抛出无法读取pathname的错误。

只需将List的styled目标从NavLink改为div即可：

const List = styled.div`
  display: flex;
  justify-content: center;
  margin: 2rem 0rem;
`;

修改后，容器不再是NavLink，不会触发路由相关的props检查，内部的NavLink也能正常获取路由上下文，错误即可解决。

内容的提问来源于stack exchange，提问作者alexdreams