javascript - 由于 react 路由器，导航链接无法工作

Question

长话短说，我希望链接能够正常工作，但是这个错误 Uncaught TypeError: Cannot readproperties 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;

我不知道还能尝试什么。 谢谢:)

Answer 1

这里有两件事要做。

1. 修正拼写错误

Pages.jsx:

把 /在路径前面为:

<Route path="/cuisine/*" element={<Cuisine />} />

更改<List>进入其他一些元素，即 <div> 。列表无法与 NavLink 一起使用。

Category.jsx:

function Category() {
    return (
        <div>
            <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>
        </div>
    );
}