So I've been trying to figure out why I'm getting these errors. I found some recourses that helped fix some of the errors I was getting using BrowserRouter in react, but I can't find anything else to further fix what's happening now. I've tried multiple solutions but I can't find anything else on this issue, so I'm unsure where I'm going wrong.

Versions:

• npm - 8.10.0
• node - 16.13.0
• react - ^18.1.0
• react-dom - ^18.1.0
• react-router-dom - ^5.2.0
• react-scripts - 5.0.1

Errors:

Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')
    at Router (components.tsx:197:1)
    at renderWithHooks (react-dom.development.js:16175:1)
    at mountIndeterminateComponent (react-dom.development.js:20913:1)
    at beginWork (react-dom.development.js:22416:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
    at invokeGuardedCallback (react-dom.development.js:4274:1)
    at beginWork$1 (react-dom.development.js:27405:1)
    at performUnitOfWork (react-dom.development.js:26513:1)
    at workLoopSync (react-dom.development.js:26422:1)

and

The above error occurred in the <Router> component:

    at Router (http://localhost:3000/static/js/bundle.js:39806:15)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

What I've tried:

1. Removing react-router-dom and reinstalling it.
2. Removing node_modules folder and running the app without it, and reinstalling npm. Along with removing package-lock.json.
3. Tried Cleaning npm cache with --force

Code: App.js

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

import Home from './AppHome'

function App() {
    return (
      <div>
        <BrowserRouter>
          <nav>
            <Link to="/">Home</Link>
            <Link to="/test">Test Page</Link>
          </nav>

          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/test" element={(
              <div><h1>Test Test Test</h1></div>
            )}/>
          </Routes>
        </BrowserRouter>
      </div>
    )
}

export default App;

AppHome.js

import React from "react";

function Home() {
      return (
          <h1>Home</h1> 
      ) 
}

export default Home;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Router } from 'react-router-dom';
//import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
      <App />    
    </Router>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: bitly url
//reportWebVitals();

package.json

{
  "name": "frontend",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^1.1.2",
    "npm": "8.10.0",
    "node": "16.13.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3000",
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "web-vitals": "^2.1.4"
  }
}

CodePudding user response：

Looks to me like you have 2 routers and the outer one receiving the path does not have any routes to follow.

In index.js remove the router

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

//import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <App />    
  </React.StrictMode>
);