title: whenever i click on any link in sidebar(i.e about, work, contact, etc) that particular Component should open inside Content component
body: <p>new to React Router, my question is how to render a particular component inside other layout which is already rendered (i have two components sidebar and content i just want if i click on any link in sidebar that component will we render in already render Content component not override that)</p>
  
  <pre><code>
  ////////////Sidebar.js////////////
  
  import React from 'react'
  import { BrowserRouter, Link } from 'react-router-dom'
  import PersonalImg from '../images/personal.gif'
  
  const Sidebar = () =&gt; {
     return (
         &lt;div className="sidebar"&gt;
             &lt;BrowserRouter&gt;
                 &lt;div className="personal-img"&gt;
                     &lt;img src={PersonalImg} alt="personl-img" /&gt;
                 &lt;/div&gt;
                 &lt;div className="navigation"&gt;
                     &lt;ul className="list"&gt;
                         &lt;li&gt;&lt;Link to="/about"&gt;About&lt;/Link&gt;&lt;/li&gt;
                         &lt;li&gt;&lt;Link to="/work"&gt;Work&lt;/Link&gt;&lt;/li&gt;
                         &lt;li&gt;&lt;Link to="/skills"&gt;Skills&lt;/Link&gt;&lt;/li&gt;
                         &lt;li&gt;&lt;Link to="/contact"&gt;Contact&lt;/Link&gt;&lt;/li&gt;
                     &lt;/ul&gt;
                 &lt;/div&gt;
             &lt;/BrowserRouter&gt;
         &lt;/div&gt;
     )
  }
  
  export default Sidebar;
  
  
  Content component...
  /////////////////Content.js//////////////////
  
  import React from 'react'
  import { BrowserRouter, Route } from 'react-router-dom'
  import About from './About'
  import Skills from './Skills'
  import Work from './Work'
  import Contact from './Contact'
  
  const Content = (props) =&gt; {
  
     return (
         &lt;div className="content"&gt;
             &lt;BrowserRouter&gt;
                 &lt;Route path="/" componet={About} /&gt;             
                 &lt;Route path="/work" componet={Work} /&gt;             
                 &lt;Route path="/contact" componet={Contact} /&gt;             
                 &lt;Route path="/skills" componet={Skills} /&gt;             
             &lt;/BrowserRouter&gt;
         &lt;/div&gt;
     )
  }
  
  export default Content;
  
  and thats how App.js rendering these components
  
  render() {
     return (
       &lt;Fragment&gt;
           &lt;Sidebar /&gt;
           &lt;Content /&gt;
       &lt;/Fragment&gt;
     )
   }
  </code></pre>