title: React Router navigation between routes with parameters
body: <p>I've been learning React Router by constructing a simple blog application, but I got stuck right away with a simple functionality of Previous Post and Next Post buttons. My first Router looked like this:</p>
  
  <pre><code>&lt;Route path="/" component={App}&gt;
    &lt;IndexRoute component={Posts} /&gt;
    &lt;Route path="posts/:id" component={PostView} /&gt;
  &lt;/Route&gt;
  </code></pre>
  
  <p>Posts:</p>
  
  <pre><code>  componentDidMount() {
      const { fetchPosts } = this.props.actions;
      const url = window.Routes.posts_path({ format: 'json' });
      fetchPosts(url);
    }
  
    render() {
      const { posts, isFetching } = this.props.posts;
      const opacity = isFetching ? '0' : '1';
      return (
        &lt;section className="posts-list post-view" style={{ opacity }}&gt;
          {posts.map(post =&gt;
              &lt;Post
                key={post.id}
                id={post.id}
                title={post.truncated_title}
                content={post.truncated_content}
                commentsCount={post.comments.length}
                date={post.created_at}
              /&gt;
            )
          }
        &lt;/section&gt;
      );
    }
  </code></pre>
  
  <p>PostView:</p>
  
  <pre><code>  componentDidMount() {
      const { fetchSinglePost } = this.props.actions;
      const id = this.props.params.id;
      const url = window.Routes.post_path(id, { format: 'json' });
      fetchSinglePost(url);
      window.scrollTo(0, 0);
    }
  
    render() {
  
        ***
        &lt;footer className="post-footer"&gt;
          &lt;div className="prv"&gt;
            &lt;Link to={window.Routes.post_path(`${id - 1}`)}&gt;
              &amp;#8592; Previous post
            &lt;/Link&gt;
          &lt;/div&gt;
          &lt;div className="nxt"&gt;
            &lt;Link to={window.Routes.post_path(`${id + 1}`)}&gt;
              Next post &amp;#8594;
            &lt;/Link&gt;
          &lt;/div&gt;
        &lt;/footer&gt;
        ***
      );
    }
  </code></pre>
  
  <p>But the routing doesn't work as expected: there's a <code>@@router/LOCATION_CHANGE</code> action logged, URL is changed, re-render is initiated, but no content change takes place. I've tried to make the <code>PostView</code> a nested route, like this:</p>
  
  <pre><code>&lt;Route path="/" component={App}&gt;
    &lt;Route path="posts" component={Posts}&gt;
      &lt;Route path="/posts/:id" component={PostView} /&gt;
    &lt;/Route&gt;
  &lt;/Route&gt;
  </code></pre>
  
  <p>And then in the <code>Posts</code> component:</p>
  
  <pre><code>  &lt;section className="posts-list post-view" style={{ opacity }}&gt;
      {this.props.children || 
        posts.map(post =&gt;
          &lt;Post
            key={post.id}
            id={post.id}
            title={post.truncated_title}
            content={post.truncated_content}
            commentsCount={post.comments.length}
            date={post.created_at}
          /&gt;
        )
      }
    &lt;/section&gt;
  </code></pre>
  
  <p>Reducers:</p>
  
  <pre><code>import { combineReducers } from 'redux';
  import { routerReducer } from 'react-router-redux';
  import postsReducer from './postsReducer';
  
  export default combineReducers({
    routing: routerReducer,
    posts: postsReducer
  });
  </code></pre>
  
  <p>Initialisation:</p>
  
  <pre><code>const store = configureStore();
  const routes = configureRoutes(store);
  const history = syncHistoryWithStore(
    browserHistory,
    store
  );
  document.addEventListener('DOMContentLoaded', () =&gt; {
    ReactDOM.render(
      &lt;Provider store={store}&gt;
        &lt;Router history={history} children={routes} /&gt;
      &lt;/Provider&gt;, document.getElementById('app'));
  }, false);
  </code></pre>
  
  <p>The general data flow still works, i.e. <code>Posts</code> render results of <code>posts.map()</code> on the <code>/posts</code> route and render <code>PostView</code> on the <code>/posts/:id</code> route but navigating between <code>/posts/:id</code> from inside of the <code>PostView</code> still doesn't work. I've read tutorial on the GitHub, but it didn't really help and I'm out of ideas. I would appreciate pointers how I can solve this. I'm also using <code>react-router-redux</code> if it's related.</p>