title: Using react-router-redux can Link components be used to transition after loading a routes state
body: <p>I have been using <a href="https://github.com/reactjs/react-router-redux" rel="nofollow noreferrer">react-router-redux</a> which allows for my location to be stored in state nicely, and allows me to use react-router for defining routes, and linking between routes. </p>
  
  <p>One problem seems to be that when I need to navigate using a <code>&lt;Link /&gt;</code> component like so:</p>
  
  <pre><code>&lt;Link to={`/movie/${m.id}`}&gt;
      &lt;p&gt;{m.name}&lt;/p&gt;
  &lt;/Link&gt;
  </code></pre>
  
  <p>this will trigger the change of route, and on load of the new route, in this case the <code>&lt;Movie /&gt;</code> route, the state for the movie page is loaded. </p>
  
  <p>This doesn't really work nicely for transition between pages, as the new page will be blank on navigation, or you can put in a loader but really it should not navigate to the new page until the api call for the new page has loaded. Similar to sites like <a href="http://pitchfork.com/" rel="nofollow noreferrer">pitchfork.com</a> or <a href="http://www.theguardian.com/" rel="nofollow noreferrer">theguardian.com</a> </p>
  
  <p>This implementation has been discussed in this <a href="https://stackoverflow.com/questions/31268740/firing-redux-actions-in-response-to-route-transitions-in-react-router?rq=1">question</a> and the approach of just using a loader between page transitions is used in the <a href="https://github.com/reactjs/redux/tree/master/examples/real-world" rel="nofollow noreferrer">real-world-example</a> and <a href="http://redux.js.org/docs/advanced/ExampleRedditAPI.html" rel="nofollow noreferrer">reddit api example</a></p>
  
  <p>My question is, if I want to load state for the new container/route in my site before navigating, do I need to follow the approach suggested by dax chen in this <a href="https://stackoverflow.com/questions/34444154/how-should-i-update-redux-store-during-a-react-router-transition">question</a>?</p>
  
  <p>To sum up the answer was to fire an action and using redux-thunk we can preload the state by calling the action for the new container/route, then on completion we navigate to the page using react-router-redux's <code>push()</code> action</p>
  
  <pre><code>store.dispatch(push('/foo'))
  </code></pre>
  
  <p>If this is the recommended approach for preloading a page before transition, then I will be changing my <a href="https://github.com/StevenIseki/react-router-redux-example" rel="nofollow noreferrer">react-router-redux-example</a> and my current site to use this approach.</p>
  
  <p>An action to load the new route's data then navigate will look something like this:</p>
  
  <pre><code>function fetchInit(url, id, to) {
    return dispatch =&gt; {
      return dispatch(fetchMovie(url, id))
        .then(function(home) {
          return dispatch(push(to))
        })
    }
  }
  </code></pre>
  
  <p>It will need some logic to identify the new container's action to call and also the new path to navigate to. It may call the static <code>fetchData()</code> method on the new page's container component.</p>
  
  <p>So this will somewhat complicate the <code>&lt;Link /&gt;</code> component, I am just looking for some advice on if this is the correct way, or I may have missed a simpler more recommended approach.</p>
  
  <pre><code>&lt;Link onClick={ () =&gt; dispatch(navigate(`/movie/${m.id}`, 'Movie')) } &gt;
      &lt;p&gt;{m.name}&lt;/p&gt;
  &lt;/Link&gt;
  </code></pre>