Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')

I have searched about this problem a lot and everywhere I'm getting answer to use to instead of href but I'm already using to

Here is my Code app.js

import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";

return (
  <>
    <Navbar
      title="Texter"
      aboutus="AboutTextUtils"
      toggleMode={toggleMode}
      mode={mode}
    ></Navbar>
    <BrowserRouter>
      <Routes>
        <Route path="/about" element={<About />} />
        <Route
          path="/"
          element= {<Text title="Enter the text below" mode={mode}/>} 
        /> 
      </Routes>
    </BrowserRouter>
  </>

This is navbar where the link tag is

import { Link, Router } from 'react-router-dom';
export default function Navbar(props) {
  return (
    <Router>
      <nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
        <div className="container-fluid">
          <a className="navbar-brand" href="/">{props.title}</a>
          <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
              <li className="nav-item">
                <Link className="nav-link active" aria-current="page" to={"/"}>Home</Link>  //This is the Link tag
              </li>
              <li className="nav-item">
               <Link  className="nav-link" to={"/about"}>{props.aboutus}</Link>  //This is the Link tag
              </li>
            </ul>
            <div className={`form-check form-switch text-${props.mode === 'light'?'dark':'light'}`}>
              <input className="form-check-input" onClick={props.toggleMode} type="checkbox" role="switch" id="flexSwitchCheckDefault"/>
              <label className="form-check-label" htmlFor="flexSwitchCheckDefault">Enable Dark Mode</label>
            </div>
          </div>
        </div>
      </nav>
    </Router>
  )

CodePudding user response：

Issue

You are rendering the Navbar component outside the BrowserRouter and then rendering the Navbar UI into the low-level Router component which has some required props.

See Router

declare function Router(
  props: RouterProps
): React.ReactElement | null;

interface RouterProps {
  basename?: string;
  children?: React.ReactNode;
  location: Partial<Location> | string; // <-- required!!
  navigationType?: NavigationType;
  navigator: Navigator;                 // <-- required!!
  static?: boolean;
}

It's the location being undefined that can't access any pathname property.

Solution

Move the Navbar component into the BrowserRouter so there is a provided router context. Remove the Router in Navbar.

import { Link } from 'react-router-dom';

export default function Navbar(props) {
  return (
    <nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
      ...
    </nav>
  );
}

import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";

...

return (
  <>
    <BrowserRouter>
      <Navbar
        title="Texter"
        aboutus="AboutTextUtils"
        toggleMode={toggleMode}
        mode={mode}
      />
      <Routes>
        <Route path="/about" element={<About />} />
        <Route
          path="/"
          element={<Text title="Enter the text below" mode={mode} />}
        /> 
      </Routes>
    </BrowserRouter>
  </>
);

CodePudding user response：

there's a place where you are calling pathname where it has not been defined. try to show that in your question