title: Changing a component to a container seems to break Routes in that component
body: <p>I'm running in to a problem where making a component that houses Routes in to a container seems to break react router. If the component that houses my routes is a container then clicking a Link updates the URL but doesn't change the screen rendered. If I refresh the page once the URL has changed or go directly to the url it renders the expected view. Changing the container back to regular component seems to fix this issue but I'd like to keep it as a container so I can use the necessary actions.</p>
  
  <p>Routes broken: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react'
  import { Route } from 'react-router-dom'
  import { bindActionCreators } from 'redux'
  import { connect } from 'react-redux'
  
  import '../styles/App.css';
  import Header from '../components/Header'
  import Home from './Home'
  import NewPost from './NewPost'
  import { getAllPosts, getAllCategories } from '../actions'
  
  class App extends Component {
    componentDidMount() {
      this.props.getAllPosts()
      this.props.getAllCategories()
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;Header /&gt;
  
          &lt;Route exact path="/" render={() =&gt; (
            &lt;Home /&gt;
          )} /&gt;
  
          &lt;Route exact path="/post" render={() =&gt; (
            &lt;NewPost /&gt;
          )} /&gt;
          
          &lt;Route path="/article" render={() =&gt; (
            &lt;div&gt;article page&lt;/div&gt;
          )} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapDispatchToProps = dispatch =&gt; (
    bindActionCreators({
      getAllPosts, 
      getAllCategories
    }, dispatch)
  )
  
  export default connect(null, mapDispatchToProps)(App)</code></pre>
  </div>
  </div>
  </p>
  
  <p>Routes working:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react'
  import { Route } from 'react-router-dom'
  import { bindActionCreators } from 'redux'
  import { connect } from 'react-redux'
  
  import '../styles/App.css';
  import Header from '../components/Header'
  import Home from './Home'
  import NewPost from './NewPost'
  import { getAllPosts, getAllCategories } from '../actions'
  
  export default class App extends Component {
    componentDidMount() {
      //this.props.getAllPosts()
      //this.props.getAllCategories()
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;Header /&gt;
  
          &lt;Route exact path="/" render={() =&gt; (
            &lt;Home /&gt;
          )} /&gt;
  
          &lt;Route exact path="/post" render={() =&gt; (
            &lt;NewPost /&gt;
          )} /&gt;
          
          &lt;Route path="/article" render={() =&gt; (
            &lt;div&gt;article page&lt;/div&gt;
          )} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapDispatchToProps = dispatch =&gt; (
    bindActionCreators({
      getAllPosts, 
      getAllCategories
    }, dispatch)
  )
  
  // export default connect(null, mapDispatchToProps)(App)</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help with this would be massively appreciated, it's been driving me crazy!</p>
  
  <p>Edit: For clarity here's my index.js which has the wrapping BrowserRouter:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import ReactDOM from 'react-dom'
  import { createStore, applyMiddleware, compose } from 'redux'
  import { Provider } from 'react-redux'
  import { BrowserRouter } from 'react-router-dom'
  import thunk from 'redux-thunk'
  
  // Middleware
  import logger from 'redux-logger'
  
  // Martyware
  import rootReducer from './reducers'
  import App from './containers/App';
  
  import './styles/index.css';
  
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
  
  const store = createStore(
    rootReducer,
    composeEnhancers(
      applyMiddleware(thunk),
      applyMiddleware(logger)
    )
  )
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;BrowserRouter&gt;
        &lt;App /&gt;
      &lt;/BrowserRouter&gt;
    &lt;/Provider&gt;
    , document.getElementById('root')
  )</code></pre>
  </div>
  </div>
  </p>