title: MERN App: React's Router Issue upon Rendering
body: <h1> Problem Summary </h1>
  <p>I am working on a MERN app.</p>
  <p>So far I have built the backend, and just starting adding routes in the frontend.</p>
  <p>After the process of adding routes to the frontend, an issue arose. The issue is that nothing shows up on the screen. In the Console, the following error shows:</p>
  <p><a href="https://i.stack.imgur.com/kWCPX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kWCPX.png" alt="enter image description here" /></a></p>
  <h1> Problem Details </h1>
  <h2> Directory Snapshot  </h2>
  <p>The directory where my app is looks like this:
  <a href="https://i.stack.imgur.com/AGvH6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AGvH6.png" alt="enter image description here" /></a></p>
  <h2> App.js  </h2>
  <pre><code>// import bootstrap
  import &quot;bootstrap/dist/css/bootstrap.min.css&quot;;
  // import Routers
  import {BrowserRouter as Router, Route} from &quot;react-router-dom&quot;;
  
  import Navbar from &quot;./components/navbar.component&quot;;
  import ExerciseList from &quot;./components/exercises-list.component&quot;;
  import EditExercise from &quot;./components/edit-exercise.component&quot;;
  import CreateExercise from &quot;./components/create-exercise.component&quot;;
  import CreateUser from &quot;./components/create-user.component&quot;;
  
  
  function App() {
    return (
      &lt;Router&gt;
        
        &lt;Navbar/&gt;
        &lt;br/&gt;
        
        &lt;Route exact path=&quot;/&quot; component={ExerciseList}/&gt;
        &lt;Route path=&quot;/edit/:id&quot; component={EditExercise}/&gt;
        &lt;Route path=&quot;/create&quot; component={CreateExercise}/&gt;
        &lt;Route path=&quot;/user&quot; component={CreateUser}/&gt;
  
      &lt;/Router&gt;
  
    );
  }
  
  export default App;
  
  </code></pre>
  <h2> package.json  </h2>
  <pre><code>{
    &quot;name&quot;: &quot;exercise-tracker&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@testing-library/jest-dom&quot;: &quot;^5.16.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^13.3.0&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^13.5.0&quot;,
      &quot;bootstrap&quot;: &quot;^5.1.3&quot;,
      &quot;react&quot;: &quot;^18.2.0&quot;,
      &quot;react-dom&quot;: &quot;^18.2.0&quot;,
      &quot;react-router-dom&quot;: &quot;^6.3.0&quot;,
      &quot;react-scripts&quot;: &quot;5.0.1&quot;,
      &quot;web-vitals&quot;: &quot;^2.1.4&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [
        &quot;react-app&quot;,
        &quot;react-app/jest&quot;
      ]
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    }
  }
  </code></pre>
  <h2> navbar.component.js  </h2>
  <pre><code>import React, {Component} from 'react'
  import { Link } from 'react-router-dom';
  
  export default class Navbar extends Component {
      render() {
          return (
              &lt;nav className=&quot;navbar navbar-expand-lg navbar-light bg-light&quot;&gt;
                  &lt;Link to=&quot;/&quot; className=&quot;navbar-brand&quot;&gt;Exercise Tracker&lt;/Link&gt;
                  &lt;div className='collapse navbar-collapse'&gt;
                      &lt;ul className=&quot;navbar-nav mr-auto&quot;&gt;
                          &lt;li className=&quot;navbar-item&quot;&gt;&lt;Link to=&quot;/&quot; className=&quot;nav-link&quot;&gt;Exercises&lt;/Link&gt;&lt;/li&gt;
                          &lt;li className=&quot;navbar-item&quot;&gt;&lt;Link to=&quot;/create&quot; className=&quot;nav-link&quot;&gt;Create Exercise Log&lt;/Link&gt;&lt;/li&gt;
                          &lt;li className=&quot;navbar-item&quot;&gt;&lt;Link to=&quot;/user&quot; className=&quot;nav-link&quot;&gt;Create User&lt;/Link&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
          )
  
  
      }
  }
  </code></pre>
  <h1> What I have tried </h1>
  <p>I tried following the steps on the console and wrapping  in a  in App.js (I also update App.js's line <code>import {BrowserRouter as Router, Route} from &quot;react-router-dom&quot;</code> to <code>import {BrowserRouter as Router, Route, Routes} from &quot;react-router-dom&quot;</code>).</p>
  <p>This solves the problem of the white page and the console errors. However, I do not see anything in the body (which is what I expect upon clicking the links in the navbar) and I see the following errors in the console:
  <a href="https://i.stack.imgur.com/OoiKD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OoiKD.jpg" alt="enter image description here" /></a>
  At this point I did not know where to go.</p>