React-router: Switch wrapped in a component not updating on route change

[jebzaki]

Version

4.1.2

Steps to reproduce

Routes.js

<HashRouter history={history}>
   <App>
      <Switch>
         <Route exact path="/" component={SignIn} />
         <Route path="/signin" component={SignIn} />
         <Route path="/signup/" component={SignUp} />
         <Route path="/signup" component={SignUp} />
      </Switch>
   </App>
</HashRouter>

App.js

<div className="site">
   <NotificationContainer />
   <Header router={this.props.router} session={this.props.session} actions={this.props.actions} exchange={this.props.exchange} />
   {this.props.children}
   <Footer />
</div>

Expected Behavior

On route change the respective component is shown

Actual Behavior

Path changes but previous component is shown until the page is refreshed.

[jacobwgillespie]

@jebzaki did you solve this issue? I am experiencing something similar.

[jebzaki]

I ended up, dumping my App component and wrapping everything in a Router component instead

<Router>
  <div className="site">
    <NotificationContainer />
    <Header session={this.props.session} actions={this.props.actions} />
    <Route
      render={({ location }) => (
        <ReactCSSTransitionGroup
          transitionAppear={true}
          transitionAppearTimeout={450}
          transitionEnterTimeout={450}
          transitionLeaveTimeout={200}
          transitionName={this.getPageAnimation(location)}
        >
          <Switch key={location.key} location={location}>
            {/* ... routes in here ... */}
            <Route component={NotFound} />
          </Switch>
        </ReactCSSTransitionGroup>
      )}
    />
    <Footer />
  </div>
</Router>

[jacobwgillespie]

Ah, a <Route> with a controlled <Switch>, cool. Thanks for sharing!

[dimitar-nikovski]

@jebzaki you provided the only working solution, which I have found. My component was connected to redux, tried wrapping it with withRouter and passing pure: false to the connect options, nothing worked.