title: reactjs/react-router-dom: Browserrouter routing question
body: <p>this is probably a very simple issue but I cannot find an answer from my searching.</p>
  
  <p>I am writing an app using ReactJs and am using react-router-dom's browserrouter for routing.</p>
  
  <p>When I enter '/login' as URL, the below code will return Profile component, instead of intended Login component. How do I ensure that this will land to Login component as intended?</p>
  
  <pre><code>import React from 'react';
  import { BrowserRouter, Route } from "react-router-dom";
  import Home from "./routes/Home";
  import Profile from "./routes/Profile";
  import Post from "./routes/Post"
  import Login from "./routes/Login"
  
  function App() {
    return (
      &lt;BrowserRouter&gt;
          &lt;Route path="/" exact={true} component={Home}/&gt;
          &lt;Route path="/login" exact={true} component={Login}/&gt;
          &lt;Route path="/r/:postid" exact={true} component={Post}/&gt;
          &lt;Route path="/:username" exact={true} component={Profile}/&gt;
      &lt;/BrowserRouter&gt;
    );
  }
  
  export default App; 
  </code></pre>