title: react-router-dom not working as expected with routes
body: <p>I'm understanding the react-router-dom library and the components that provide the routing and noticed a strange behavior as below.</p>
  <p>Assume we have our App.js component which return JSX code as below.</p>
  <pre><code>import './App.css';
  import ColorAdder from './ColorAdder';
  import {Switch,Route} from 'react-router-dom';
  function App() {
    
    return (
    &lt;Switch&gt;
       &lt;ColorAdder/&gt;
       &lt;Route path=&quot;/hello&quot; exact&gt;
          &lt;p&gt;Hello&lt;/p&gt;
      &lt;/Route&gt;
     &lt;/Switch&gt;    
    );
  }
  
  export default App;
  </code></pre>
  <p>Now the component <code>ColorAdder.js</code> also consists of Routes with <code>Path</code> and <code>exact</code> attributes declared as below.</p>
  <pre><code>import { Route } from &quot;react-router-dom&quot;;
  const ColorAdder = ()=&gt;{
    return (
      &lt;Route path=&quot;/hi&quot; exact&gt;
          &lt;p&gt;Hi&lt;/p&gt;
      &lt;/Route&gt;
    )
  }
  export default ColorAdder;
  </code></pre>
  <p>The App.js is wrapped with <code>&lt;BrowserRouter&gt;</code> and what i noticed is when we test the page with url <code>http://localhost:3002/hi</code> it returned Hi as expected but it does n't return anything for 'http://localhost:3002/hello'.why does it behave this way ? Can anyone please explain this behavior why the <code>Route</code> with path <code>hello</code> is not identified even when it is under <code>Switch</code> wrapping and with <code>Path</code> and <code>exact</code> attributes</p>
  <p>Below is the <code>Index.js</code> using <code>BrowserRouter</code></p>
  <pre><code>ReactDOM.render(&lt;BrowserRouter&gt;&lt;App/&gt;&lt;/BrowserRouter&gt;,document.getElementById('render'))
  </code></pre>
  <p><a href="https://i.stack.imgur.com/ohjKg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ohjKg.png" alt="When the path is &quot;/hi&quot;" /></a>
  <a href="https://i.stack.imgur.com/A0aGK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A0aGK.png" alt="when the path is &quot;/hello&quot;" /></a></p>
  <p>Versions:
  react-router-dom@5,
  npm - 7.20.3,
  node - v16.7.0</p>