title: React routing in not working in react js?
body: <p>I am stuck with a problem. I tried to solve it spending lots of time but did not find any way. In my simple react application, I want to make routing but its not working, when I click on home or add user link it does not redirect on that page, please let me know where I am wrong.</p>
  <p><code>App.js</code></p>
  <pre><code>import &quot;./App.css&quot;;
  import Navbar from &quot;./components/Navbar&quot;;
  import { BrowserRouter, Routes, Route,Switch } from &quot;react-router-dom&quot;;
  import AddUser from &quot;./components/AddUser&quot;;
  import EditUser from &quot;./components/EditUser&quot;;
  import Home from &quot;./components/Home&quot;;
  
  function App() {
    return (
      &lt;BrowserRouter&gt;
        &lt;Navbar /&gt;
        &lt;div className=&quot;App&quot;&gt;
          &lt;Routes&gt;
            &lt;Route exact path=&quot;/&quot; component={Home} /&gt;
            &lt;Route exact path=&quot;/adduser&quot; component={AddUser} /&gt;
            &lt;Route exact path=&quot;/edituser&quot; component={EditUser} /&gt;
          &lt;/Routes&gt;
        &lt;/div&gt;
      &lt;/BrowserRouter&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><code>Navbar.js</code></p>
  <pre><code>import React from &quot;react&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  
  const Navbar = () =&gt; {
    return (
      &lt;div&gt;
        &lt;nav class=&quot;navbar navbar-expand-lg navbar-light bg-light&quot;&gt;
          &lt;div class=&quot;container-fluid&quot;&gt;
            &lt;Link to=&quot;/&quot; class=&quot;navbar-brand font-weight-blod&quot;&gt;
              Crud Application
            &lt;/Link&gt;
            &lt;button
              class=&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 class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
              &lt;ul class=&quot;navbar-nav me-auto mb-2 mb-lg-0&quot;&gt;
                &lt;li class=&quot;nav-item&quot;&gt;
                  &lt;Link to=&quot;/&quot; class=&quot;nav-link active&quot; aria-current=&quot;page&quot;&gt;
                    Home
                  &lt;/Link&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
              &lt;form class=&quot;form-inline my-2 my-lg-0&quot;&gt;
                &lt;Link
                  to=&quot;/adduser&quot;
                  class=&quot;btn btn-outline-primary my-2 my-sm-0&quot;
                  type=&quot;submit&quot;
                &gt;
                  Add User
                &lt;/Link&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    );
  };
  
  export default Navbar;
  </code></pre>
  <p>This is the Home page where I want to redirect when I click on Home.</p>
  <pre><code>import React from 'react'
  
      const Home = () =&gt; {
          return (
              &lt;div&gt;
                  &lt;h1&gt;Welcome to Home Page&lt;/h1&gt;
              &lt;/div&gt;
          )
      }
      
  export default Home
  </code></pre>