How to solve the following error "Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')" and 2 more errors I wrote on the body?

Question

I am using react-router to change the content of my website and I am getting the following errors.

I installed the latest version and tried to follow the new syntax given on the document but it's still not working. I keep getting all these ambiguous errors. Does anyone know how to fix it?

Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')
    at Router (index.tsx:280:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)

The above error occurred in the <Router> component:
at Router (http://localhost:3000/static/js/bundle.js:37497:15)
at App (http://localhost:3000/static/js/bundle.js:42:74)

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.

My Code----

app.js

    import React, { useState } from "react";
    import "./App.css";
    import Navbar from "./component/Navbar";
    import TextForm from "./component/TextForm";
    import Alert from "./component/Alert";
    import About from "./component/About";
    import { Routes, Route, Router, Link } from 'react-router-dom';
    function App() {
    return (
        <>
        <Router>
        <Navbar
              title="TextUtils"
              aboutText="About TextUtils"
              mode={mode}
              toggleMode={toggleMode}
            />
            <Alert alert={alert} />
            <div className="container my-3">
              <Routes>
              <Route path="/about" element={<About />}>
                </Route>
                <Route path="/" element={<TextForm heading="Enter text to analyze"  mode={mode} showAlert={showAlert} />}>
                </Route>
              </Routes>
        </div>
        </Router>
        </>
      );
    }
    
    export default App;

navbar.js

    import React from "react";
    import PropTypes from "prop-types";
    import { Link } from "react-router-dom";
    export default function Navbar(props) {
      return (
        <div>
          <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>
                  </li>
                  <li className="nav-item">
                    <Link className="nav-link" to="/about">
                      {props.aboutText}
                    </Link>
                  </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>
        </div>
      );
    }
    
    Navbar.propTypes = {
      title: PropTypes.string.isRequired,
      aboutText: PropTypes.string.isRequired,
    };
    
    Navbar.defaultProp = {
      title: "Set title here",
      aboutText: "set about text here",
    };`

Answer 1

Could you please follow the below github link? in that I have handled the router configuration and also you will get some idea on how to access the params in the latest version.

Click gitHub link here