title: Reactjs Redirect Url Changes but component not loading
body: <p>I am new to reactjs. i have an problem with routing from external js file.</p>
  <p>this is my navigation file code in top-header.js</p>
  <pre><code>import React from 'react';
  import {BrowserRouter as Router, Link} from 'react-router-dom';
  
  function Header(props) {
  return  &lt;div&gt;
      &lt;ul&gt;
          &lt;Router&gt;
              &lt;li&gt;&lt;Link to=&quot;/&quot;&gt;Home&lt;/Link&gt;&lt;/li&gt;
              &lt;li&gt;&lt;Link to=&quot;/about-us&quot;&gt;About&lt;/Link&gt;&lt;/li&gt;
              &lt;li&gt;&lt;Link to=&quot;/contact-us&quot;&gt;Contact&lt;/Link&gt;&lt;/li&gt;
          &lt;/Router&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
       }
      export default Header;
  </code></pre>
  <p>and this is my main app.js file</p>
  <pre><code>import 'bootstrap/dist/css/bootstrap.min.css';
  import './App.css';
  import {BrowserRouter as Router, Route, Switch,Link} from 'react-router-dom';
  import Header from './utils/top-header.js';
  /*pages*/
  import Home from './utils/pages/home.js';
  import Contact from './utils/pages/contact.js';
  import About from './utils/pages/about.js';
  
  function App() {
   return (
     &lt;div&gt;
      &lt;Header /&gt;      
      &lt;Router&gt;        
      
      //this Link code works when directly added to app.js file//
      &lt;li&gt;&lt;Link to=&quot;/&quot;&gt;Home&lt;/Link&gt;&lt;/li&gt;
      &lt;li&gt;&lt;Link to=&quot;/about-us&quot;&gt;About&lt;/Link&gt;&lt;/li&gt;
      &lt;li&gt;&lt;Link to=&quot;/contact-us&quot;&gt;Contact&lt;/Link&gt;&lt;/li&gt;
  
       &lt;Switch&gt;
          &lt;Route exact path=&quot;/&quot; component={Home}&gt;&lt;/Route&gt;
          &lt;Route path=&quot;/about-us&quot; component={About}&gt;&lt;/Route&gt;
          &lt;Route path=&quot;/contact-us&quot; component={Contact}&gt;&lt;/Route&gt;
      &lt;/Switch&gt;
     &lt;/Router&gt;
    &lt;/div&gt;
   );
   }
   export default App;
  </code></pre>
  <p>i have checked by adding direct link in app.js file it is working but when the click link in header component not working.
  <strong>this is my output</strong>
  <a href="https://i.stack.imgur.com/70wVA.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/70wVA.gif" alt="enter image description here" /></a></p>