title: how to change a component without rendering the other component in reactjs and react-router-dom
body: <p>i have three component Header,Sidebar,and another one is the center . the center fetch data(all datas-post). In each post there will be a button to see present full post . now the full-post component will be replacing the all post-component. I dont want to render all other component. Just want to render the full-post component.Now How can I do this.
  My app.js containing the three main component</p>
  
  <pre><code>export default class App extends React.Component{
    constructor(props){
      super(props);
    }
    render(){
      return (
        &lt;ApolloProvider client = {client} &gt;
          &lt;div &gt;
            &lt;div className="row"&gt;
              &lt;SideBar store={store} /&gt;
              &lt;Center store={store} /&gt;
              &lt;RightSlidePanel store={store}/&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/ApolloProvider&gt;
      )
    }
  }
  </code></pre>
  
  <p>center.js component</p>
  
  <pre><code>  render(){
  
      return (
        &lt;Provider store = {this.store}&gt;
          &lt;div className="center-bar nine columns "&gt;
            &lt;div className="row"&gt;
                &lt;CenterHeader /&gt;
                &lt;PostContent /&gt;
                &lt;RightSide /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/Provider&gt;
      )
  </code></pre>
  
  <p>now all the post are in <code>postContent</code> component  . Now A component <code>postdetail</code> will be there which when a button will be click it will replace the <code>postContent</code> in this <code>center</code> component</p>