NavLinks wont work because of react-router

Question

Long story short, I want the links to work but this error Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') keeps popping up. I did reinstall the packages, restructured the code multiple times, reopened react, and deleted and added / since it did not change. It's such a simple project yet it comes with such a frustrating error. Here's the code, hopefully, your eyes see what mine don't. This is 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;

This is 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;

And this is 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;

I have no idea what else to try. Thank you :)

Answer 1

There are two things to do here.

1. Fix typo

Pages.jsx:

Put / in front of the path as:

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

2. change <List> into some other element i.e. <div>. List does not work with NavLink as it is.

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