title: Reactjs - props not changing during Routing
body: <p>I have a <code>BrowserRouter</code> which renders different components based on the <code>Route</code>. Most, of these components have <strong>similar markup</strong>. </p>
  
  <p>So, I created a <code>Wrapper</code> component which will recieve props, and render its <code>{children}</code> if provided. This <code>Wrapper</code> is called in <code>Route</code>'s.</p>
  
  <pre><code>import React, {Component} from 'react'
  import Context from '../../provider'
  import { 
      BrowserRouter,
      Route,
      Redirect,
      Switch,
  } from "react-router-dom"
  import {
      Container,
      Row,
      Col,
  } from 'reactstrap'
  import Profile from './ContentComponent/Profile'
  import Subreddit from './ContentComponent/Subreddit'
  import PostExpanded from './ContentComponent/PostExpanded'
  import InfoComponent  from './InfoComponent'
  import SwitchTab from './ContentComponent/Subreddit/SwitchTab'
  import NewPost from './ContentComponent/assets/NewPost'
  import './style.css'
  
  class Wrapper extends React.Component {
      componentDidMount() {
          this.props.setActiveTab(this.props.activeTab);
      }
  
      render() {
          {console.log('Wrapper props: ', this.props)}
          return (
              &lt;Row&gt;
                  &lt;Col md='8' id='content-block'&gt;
                      &lt;SwitchTab /&gt;
                      {this.props.children}
                  &lt;/Col&gt;
                  &lt;Col md='4' id='info-block'&gt;
                      &lt;InfoComponent info={this.props.info} {...this.props}/&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
          )
      }
  }
  
  export default class BodyComponent extends Component {
      render() {
          return (
              &lt;BrowserRouter&gt;
                  &lt;Context.Consumer&gt;
                      {context =&gt; {
                          return (
                              &lt;Container&gt;
                                  &lt;Switch&gt;
                                      &lt;Route 
                                          exact 
                                          path='/' 
                                          render={() =&gt;
                                              &lt;Redirect to='r/home/' /&gt;
                                          }
                                      /&gt;
                                      &lt;Route 
                                          exact 
                                          path='/r/home/' 
                                          render={() =&gt; 
                                              &lt;Wrapper 
                                                  setActiveTab={context.toggleTab}
                                                  activeTab={'1'} 
                                                  info='home'
                                              /&gt;
                                          }
                                      /&gt;
                                      &lt;Route 
                                          exact 
                                          path='/r/popular/' 
                                          render={() =&gt; 
                                              &lt;Wrapper 
                                                  setActiveTab={context.toggleTab} 
                                                  activeTab={'2'} 
                                                  info='popular'
                                              /&gt;
                                          }
                                      /&gt;
                                      &lt;Route 
                                          exact 
                                          path='/r/all/' 
                                          render={() =&gt;
                                              &lt;Wrapper 
                                                  setActiveTab={context.toggleTab} 
                                                  activeTab={'3'} 
                                                  info='all'
                                              /&gt;
                                          }
                                      /&gt;
                                      &lt;Route 
                                          exact 
                                          path='/u/:username/' 
                                          render={(props) =&gt; {
                                              return (
                                                  &lt;Wrapper 
                                                      setActiveTab={context.toggleTab} 
                                                      activeTab={'4'}
                                                      info='user'
                                                      user={props.match.params.username}
                                                  &gt;
                                                      &lt;Profile username={props.match.params.username} /&gt;
                                                  &lt;/Wrapper&gt;
                                              )
                                          }}
                                      /&gt;
                                      &lt;Route
                                          exact
                                          path = '/r/:subreddit/new/'
                                          render={(props) =&gt; {
                                              return (
                                                  &lt;Wrapper 
                                                      setActiveTab={context.toggleTab} 
                                                      activeTab={'4'} 
                                                      info='subreddit'
                                                      subreddit={props.match.params.subreddit}
                                                  &gt;
                                                      &lt;NewPost /&gt;
                                                  &lt;/Wrapper&gt;
                                              )
                                          }}
                                      /&gt;
                                      &lt;Route
                                          exact
                                          path = '/r/:subreddit/post/:postid/'
                                          render={(props) =&gt; {
                                              return (
                                                  &lt;Wrapper 
                                                      setActiveTab={context.toggleTab} 
                                                      activeTab={'4'} 
                                                      info='subreddit'
                                                      subreddit={props.match.params.subreddit}
                                                  &gt;
                                                      &lt;PostExpanded
                                                          subreddit={props.match.params.subreddit}
                                                          postid={props.match.params.postid}
                                                      /&gt;
                                                  &lt;/Wrapper&gt;
                                              )
                                          }}
                                      /&gt;
                                      &lt;Route
                                          exact
                                          path='/r/:subreddit/'
                                          render={(props) =&gt; {
                                              return (
                                                  &lt;Wrapper 
                                                      setActiveTab={context.toggleTab} 
                                                      activeTab={'4'} 
                                                      info='subreddit'
                                                      subreddit={props.match.params.subreddit}
                                                  &gt;
                                                      &lt;Subreddit subreddit={props.match.params.subreddit} /&gt;
                                                  &lt;/Wrapper&gt;
                                              )
                                          }}
                                      /&gt;
                                      &lt;Route
                                          exact
                                          path = '/new/'
                                          render={(props) =&gt; {
                                              return (
                                                  &lt;Wrapper
                                                      setActiveTab={context.toggleTab}
                                                      activeTab={'4'}
                                                      info='new'
                                                  &gt;
                                                      &lt;NewPost /&gt;
                                                  &lt;/Wrapper&gt;
                                              )
                                          }}
                                      /&gt;
                                  &lt;/Switch&gt;
                              &lt;/Container&gt;
                          )
                      }}
                  &lt;/Context.Consumer&gt;
              &lt;/BrowserRouter&gt;
          )
      }
  }
  </code></pre>
  
  <p>I am facing multiple problems here and I think they can all be fixed at once, I don't know how?</p>
  
  <ol>
  <li><p>The <strong>Wrapper props</strong> are not getting changed when I am changing the <strong>URL</strong>
  using <code>props.history.push</code>:</p>
  
  <pre><code>&lt;NavItem&gt;
      &lt;NavLink
          className={classnames({ active: context.activeTab === '1' })}
          onClick={() =&gt;{
              context.toggleTab('1');
              this.props.history.push('/r/home/')
          }}
      &gt;
      Home
      &lt;/NavLink&gt;
  &lt;/NavItem&gt;
  &lt;NavItem&gt;
      &lt;NavLink
          className={classnames({ active: context.activeTab === '2' })}
          onClick={() =&gt; {
              context.toggleTab('2');
              this.props.history.push('/r/popular/')
          }}
      &gt;
      Popular
      &lt;/NavLink&gt;
  &lt;/NavItem&gt;
  </code></pre></li>
  </ol>