title: How to solve the following error "Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')" and 2 more errors I wrote on the body?
body: <p>I am using react-router to change the content of my website and I am getting the following errors.</p>
  <p>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?</p>
  <pre><code>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 &lt;Router&gt; 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.
  </code></pre>
  <p>My Code----</p>
  <p>app.js</p>
  <pre><code>    import React, { useState } from &quot;react&quot;;
      import &quot;./App.css&quot;;
      import Navbar from &quot;./component/Navbar&quot;;
      import TextForm from &quot;./component/TextForm&quot;;
      import Alert from &quot;./component/Alert&quot;;
      import About from &quot;./component/About&quot;;
      import { Routes, Route, Router, Link } from 'react-router-dom';
      function App() {
      return (
          &lt;&gt;
          &lt;Router&gt;
          &lt;Navbar
                title=&quot;TextUtils&quot;
                aboutText=&quot;About TextUtils&quot;
                mode={mode}
                toggleMode={toggleMode}
              /&gt;
              &lt;Alert alert={alert} /&gt;
              &lt;div className=&quot;container my-3&quot;&gt;
                &lt;Routes&gt;
                &lt;Route path=&quot;/about&quot; element={&lt;About /&gt;}&gt;
                  &lt;/Route&gt;
                  &lt;Route path=&quot;/&quot; element={&lt;TextForm heading=&quot;Enter text to analyze&quot;  mode={mode} showAlert={showAlert} /&gt;}&gt;
                  &lt;/Route&gt;
                &lt;/Routes&gt;
          &lt;/div&gt;
          &lt;/Router&gt;
          &lt;/&gt;
        );
      }
      
      export default App;
  </code></pre>
  <p>navbar.js</p>
  <pre><code>    import React from &quot;react&quot;;
      import PropTypes from &quot;prop-types&quot;;
      import { Link } from &quot;react-router-dom&quot;;
      export default function Navbar(props) {
        return (
          &lt;div&gt;
            &lt;nav
              className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}
            &gt;
              &lt;div className=&quot;container-fluid&quot;&gt;
                &lt;a className=&quot;navbar-brand&quot; href=&quot;/&quot;&gt;
                  {props.title}
                &lt;/a&gt;
                &lt;button
                  className=&quot;navbar-toggler&quot;
                  type=&quot;button&quot;
                  data-bs-toggle=&quot;collapse&quot;
                  data-bs-target=&quot;#navbarSupportedContent&quot;
                  aria-controls=&quot;navbarSupportedContent&quot;
                  aria-expanded=&quot;false&quot;
                  aria-label=&quot;Toggle navigation&quot;
                &gt;
                  &lt;span className=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
                &lt;/button&gt;
                &lt;div className=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
                  &lt;ul className=&quot;navbar-nav me-auto mb-2 mb-lg-0&quot;&gt;
                    &lt;li className=&quot;nav-item&quot;&gt;
                      &lt;Link className=&quot;nav-link active&quot; aria-current=&quot;page&quot; to=&quot;/&quot;&gt;
                        Home
                      &lt;/Link&gt;
                    &lt;/li&gt;
                    &lt;li className=&quot;nav-item&quot;&gt;
                      &lt;Link className=&quot;nav-link&quot; to=&quot;/about&quot;&gt;
                        {props.aboutText}
                      &lt;/Link&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div
                    className={`form-check form-switch text-${
                      props.mode === &quot;light&quot; ? &quot;dark&quot; : &quot;light&quot;
                    }`}
                  &gt;
                    &lt;input
                      className=&quot;form-check-input&quot;
                      onClick={props.toggleMode}
                      type=&quot;checkbox&quot;
                      role=&quot;switch&quot;
                      id=&quot;flexSwitchCheckDefault&quot;
                    /&gt;
                    &lt;label
                      className=&quot;form-check-label&quot;
                      htmlFor=&quot;flexSwitchCheckDefault&quot;
                    &gt;
                      Enable Dark mode
                    &lt;/label&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/nav&gt;
          &lt;/div&gt;
        );
      }
      
      Navbar.propTypes = {
        title: PropTypes.string.isRequired,
        aboutText: PropTypes.string.isRequired,
      };
      
      Navbar.defaultProp = {
        title: &quot;Set title here&quot;,
        aboutText: &quot;set about text here&quot;,
      };`
  </code></pre>