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 :)

Does this answer your question? [React Router: Cannot read property 'pathname' of undefined](https://stackoverflow.com/questions/43620289/react-router-cannot-read-property-pathname-of-undefined) — Youssouf Oumar, Aug 06 '22 at 17:10
What is the version of the react-router-dom that you are using — ilketorun, Aug 06 '22 at 17:18
@alexdreams did you make sur all `Link` and `NavLink` components have `to` property accros all your codebase? — Youssouf Oumar, Aug 06 '22 at 17:29
@yousoumar Yup! I checked and checked over and over again but to no succes. In my thread is all the code that uses ```NavLink```, I don't use ```Link``` anywhere :) — alexdreams, Aug 06 '22 at 18:09

score 2 · Accepted Answer · answered Aug 06 '22 at 18:39

2

There are two things to do here.

Fix typo

Pages.jsx:

Put / in front of the path as:

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

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

answered Aug 06 '22 at 18:39

ilketorun

324
3
14

1

Yeap, that was it, thanks a lot, I feel dumber day by day 10/10 would recommend coding to anybody felling a lil' too smart. – alexdreams Aug 06 '22 at 19:17
1

You are welcome. We all face similar things every day, do not feel dumb. We need to make mistakes to get better. – ilketorun Aug 06 '22 at 19:21
1

Just FYI, that isn't a typo on the route path, they'll work either way as the `Routes` component will route relative to the parent route. The `List` component was the only issue. – Drew Reese Aug 06 '22 at 19:48

score 1 · Answer 2 · answered Aug 06 '22 at 18:35

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;
`;

I feel like the dumbest person in the world because all I had to do is get FROM THIS: ```const List = styled.div``;``` TO THIS ```const List = styled.div``;``` :) — alexdreams, Aug 06 '22 at 19:14

NavLinks wont work because of react-router

2 Answers2