title: Why does my React component remain in the DOM after navigating to another page?
body: <p>I have a simple app with a home screen, a blog master list, and then blog detail page. Navigating from the home screen to the blog list and back works as expected. When I click on one of the blog posts the app navigates to the page and renders the blog post. But when I go back to the blog master list the blog post is now at the very bottom of the blog list. And if I then navigate back to the home page the same thing, the blog post is in the DOM behind the home page graphic.</p>
  
  <p>I'm using react router 4.1. </p>
  
  <p>Does it have to do with my <strong>route setup</strong>?</p>
  
  <pre><code>import React, { Component } from 'react'
  import { BrowserRouter as Router, Route } from 'react-router-dom'
  import NavBar from './components/NavBar'
  import Blog from './pages/blog'
  import Home from './pages/home'
  import Post from './pages/post'
  import './css/App.css'
  
  class App extends Component {
    render() {
      return (
        &lt;Router&gt;
            &lt;div className="App"&gt;
              &lt;NavBar /&gt;
              &lt;Route exact path='/' component={Home} /&gt;
              &lt;Route path='/blog' component={Blog} /&gt;
              &lt;Route path='/post/:slug' component={Post} /&gt;
            &lt;/div&gt;
        &lt;/Router&gt;
      )
    }
  }
  
  export default App
  </code></pre>
  
  <p>Or with my <strong>post component</strong>?</p>
  
  <pre><code>import React from 'react'
  import fetch from 'isomorphic-unfetch'
  import NavBar from '../components/NavBar'
  import dateUtils from '../utilities/DateAndTime'
  
  const classNames = require('classnames')
  
  
  class Post extends React.Component {
  
      constructor(props) {
          super(props)
  
          this.state = {
              blogObject: null,
              fetchBlogObject: false
          }
  
          this.fetchBlogObject = this.fetchBlogObject.bind(this)
          this.createMarkup = this.createMarkup.bind(this)
          this.assignStyleToCoverImage = this.assignStyleToCoverImage.bind(this)
          this.formatDateString = this.formatDateString.bind(this)
  
      }
  
      componentWillMount() {
          this.fetchBlogObject()
      }
  
  
      componentWillReceiveProps() {
          this.fetchBlogObject()
      }
  
      fetchBlogObject() {
  
              console.log('fetching')
  
              this.setState({ fetchBlogObject: true })
  
              fetch(`*******************`)
              .then(response =&gt; response.json())
              .then((responseJson) =&gt; {
                  console.log(responseJson)
                  this.setState({ blogObject: responseJson.object })
              })
  
  
      }
  
  
      createMarkup(stringToConvertToHtml) {
          return { __html: stringToConvertToHtml }
      }
  
  
      assignStyleToCoverImage() {
  
          const style = {
              background: `url(${this.state.blogObject.metadata.hero.url})`,
              height: '35vh',
              backgroundSize: 'cover',
              backgroundPosition: 'center'
          }
  
          return style
  
      }
  
  
      formatDateString(dateString) {
          console.log(dateString)
  
          const d = `${dateUtils.returnMonthFromISODateString(dateString)} ${dateUtils.returnDateNumberFromISOString(dateString)}, ${dateUtils.returnFullYearFromISOString(dateString)} by Phil Andrews`
          return d
      }
  
      render() {
  
  
          const postContainerClasses = classNames({
              'post-container': true
          })
  
          const postBodyClasses = classNames({
              'post-body': true
          })
  
          return (
  
              &lt;div&gt;
                  &lt;NavBar /&gt;
  
                  {this.state.blogObject ?
  
                      &lt;div className={postContainerClasses} &gt;
                          &lt;div className='header-image' style={this.assignStyleToCoverImage(this.state.blogObject)} /&gt;
                          &lt;div className='post-body-padding'&gt;
                              &lt;div className='post-header-info'&gt;
                                  &lt;h1 className='post-title'&gt;{this.state.blogObject.title}&lt;/h1&gt;
                                  &lt;h4 className='post-date'&gt;{this.formatDateString(this.state.blogObject.created_at)}&lt;/h4&gt;
                              &lt;/div&gt;
                              &lt;div className={postBodyClasses} dangerouslySetInnerHTML={this.createMarkup(this.state.blogObject.content)} /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  : &lt;div&gt;Loading...&lt;/div&gt;
  
                  }
  
              &lt;/div&gt;
  
          )
  
      }
  }
  
  export default Post
  </code></pre>
  
  <p>Or with my <strong>blog list button action</strong> for navigating to a post page?</p>
  
  <pre><code>&lt;Link id={this.props.blogObject.slug} to={`/post/${this.props.blogObject.slug}`}&gt;
      &lt;button className='blog-button' style={buttonStyle} id={this.props.blogObject.slug} /&gt;
  &lt;/Link&gt;
  </code></pre>