title: linking a website with Navlink Router and Switch Route
body: <p>Here is my code
  <code>index.js</code></p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import &quot;./index.css&quot;;
  import App from &quot;./App&quot;;
  import reportWebVitals from &quot;./reportWebVitals&quot;;
  import { BrowserRouter as Router } from &quot;react-router-dom&quot;;
  
  ReactDOM.render(
   &lt;&gt;
  &lt;Router&gt;
    &lt;App /&gt;
  &lt;/Router&gt;
  &lt;/&gt;,
  document.getElementById(&quot;root&quot;)
  );
  
  reportWebVitals();
  </code></pre>
  <p>my<code>App.js</code></p>
  <pre><code>import &quot;../node_modules/bootstrap/dist/css/bootstrap.min.css&quot;;
  import &quot;../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js&quot;;
  import &quot;../node_modules/boxicons/css/boxicons.min.css&quot;;
  import &quot;./App.css&quot;;
  import MainGet from &quot;./getStart/MainGet&quot;;
  function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;MainGet /&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>my <code>MainGet.js</code></p>
  <pre><code>import React from &quot;react&quot;;
  import { BrowserRouter as Router, Switch, Route } from &quot;react-router-dom&quot;;
  import GetStartedPage from &quot;./GetStartedPage&quot;;
  import Login from &quot;./Login&quot;;
  import Signup from &quot;./Signup&quot;;
  import DoctorShow from &quot;../DoctorSidebar/DoctorShow&quot;;
  import PatientShow from &quot;../PatientSidebar/PatientShow&quot;;
  
  const MainGet = () =&gt; {
    return (
      &lt;Switch&gt;
        &lt;Route exact path=&quot;/&quot; component={GetStartedPage}&gt;&lt;/Route&gt;
        &lt;Route path=&quot;/Login&quot; component={Login}&gt;&lt;/Route&gt;
        &lt;Route path=&quot;/Signup&quot; component={Signup}&gt;&lt;/Route&gt;
        &lt;Route exact path=&quot;/DoctorShow&quot; component={DoctorShow}&gt;&lt;/Route&gt;
        &lt;Route path=&quot;/PatientShow&quot; component={PatientShow}&gt;&lt;/Route&gt;
      &lt;/Switch&gt;
    );
  };
  
  export default MainGet;
  </code></pre>
  <p>my <code>DoctorShow.js</code></p>
  <pre><code>import React from &quot;react&quot;;
  import DoctorMain from &quot;./DoctorMain&quot;;
  import DoctorSidebar from &quot;./DoctorSidebar&quot;;
  
  const DoctorShow = () =&gt; {
    return (
      &lt;div&gt;
        &lt;DoctorSidebar /&gt;
        &lt;DoctorMain /&gt;
      &lt;/div&gt;
    );
  };
  
  export default DoctorShow;
  </code></pre>
  <p>Here DoctorShow not showing properly . If I show the component DocotorShow on my <code>App.js</code> then it is showing properly but when I am connecting through another Route file while logic is same ..what is the problem then please solve?
  another mention to <code>DoctorMain</code> this component have other 6path connecting with <code>DoctorSidebar</code>
  please check</p>