title: react-router Link to post.id, keep post_index on the dom
body: <p>Screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/iXmLp.png" alt="screenshot"></p>
  
  <p>When I click on my link from index_page.</p>
  
  <pre><code>&lt;Link className="btn btn-info" to={`/posts/${post.id}`}&gt;Show&lt;/Link&gt;
  </code></pre>
  
  <p>The click works well, but my post.id loads below my index. Why my index is still on the DOM? I did something wrong with my router?</p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  import { createStore, applyMiddleware } from 'redux';
  import { browserHistory, HashRouter, BrowserRouter, Route, Switch } from 'react-router-dom';
  import promise from 'redux-promise';
  
  import reducers from './reducers';
  import PostsShow from './components/posts_show';
  import PostsIndex from './components/posts_index';
  
  const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
  
  ReactDOM.render(
    &lt;Provider store={createStoreWithMiddleware(reducers)}&gt;
      &lt;BrowserRouter &gt;
        &lt;div&gt;
          &lt;Route path="/" component={PostsIndex} /&gt;
          &lt;Route path="/posts/:id" component={PostsShow} /&gt;
        &lt;/div&gt;
      &lt;/BrowserRouter&gt;
    &lt;/Provider&gt;
    , document.querySelector('.app'));
  </code></pre>
  
  <p><strong>post_index.js</strong></p>
  
  <pre><code>class PostsIndex extends Component {
    componentDidMount() {
      this.props.fetchPosts();
    }
  
    onDeleteClick(id) {
      this.props.deletePost(id, () =&gt; {
        this.props.history.push('/');
      });
    }
  
    renderPosts() {
      return _.map(this.props.posts, post =&gt; {
        return (
          &lt;tr key={post.id}&gt;
            &lt;td&gt;{post.thumb_url}&lt;/td&gt;
            &lt;td&gt;{post.id}&lt;/td&gt;
            &lt;td&gt;{post.title}&lt;/td&gt;
            &lt;td&gt;{post.slug}&lt;/td&gt;
            &lt;td&gt;{post.created_at}&lt;/td&gt;
            &lt;td&gt;{post.update_at}&lt;/td&gt;
            &lt;td&gt;
              &lt;Link className="btn btn-info" to={`/posts/${post.id}`}&gt;Show&lt;/Link&gt;
              &lt;button className="btn btn-danger" onClick={this.onDeleteClick.bind(this, post.id)}&gt;Delete&lt;/button&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        );
      });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;h3&gt;Posts&lt;/h3&gt;
          &lt;table className="table table-condensed"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;thumb&lt;/th&gt;
                &lt;th&gt;id&lt;/th&gt;
                &lt;th&gt;title&lt;/th&gt;
                &lt;th&gt;slug&lt;/th&gt;
                &lt;th&gt;created_at&lt;/th&gt;
                &lt;th&gt;update_at&lt;/th&gt;
                &lt;th width="10%"&gt;action&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              {this.renderPosts()}
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      );
    }
  }
  
  function mapStateToProps(state) {
    return { posts: state.posts };
  }
  
  export default connect(mapStateToProps, { fetchPosts, deletePost})(PostsIndex);
  </code></pre>
  
  <p><strong>post_show.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { Link } from 'react-router-dom';
  import { fetchPost } from '../actions';
  
  class PostsShow extends Component {
    componentDidMount() {
      const { id } = this.props.match.params;
      this.props.fetchPost(id);
    }
  
    render() {
      const { post } = this.props;
  
      if (!post) {
        return &lt;div&gt;Loading...&lt;/div&gt;;
      }
  
      return (
        &lt;div&gt;
          &lt;br /&gt;
          &lt;Link className="btn btn-info" to="/"&gt;Back To Index&lt;/Link&gt;
          &lt;h3&gt;{post.title}&lt;/h3&gt;
          &lt;p&gt;{post.content}&lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }
  
  function mapStateToProps({ posts }, ownProps) {
    return { post: posts[ownProps.match.params.id] };
  }
  
  export default connect(mapStateToProps, { fetchPost })(PostsShow);
  </code></pre>