由于 react-router，NavLinks 无法工作

Question

Long story short, I just 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, deleted and added / since it did no change. ITs 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 ie <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>
    );
}

Answer 2

You are wrapping the links in Category in an NavLink and haven't passed a required to prop.

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

...

function Category() {
  return (
    <List> // <-- NavLink, missing to prop
      <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>
  );
}

NavLink

interface LinkProps extends Omit< React.AnchorHTMLAttributes<HTMLAnchorElement>, "href" > { replace?: boolean; state?: any; to: To; // <-- to prop is required reloadDocument?: boolean; }

You probably want List to be some other styled element, like a div .

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