onEnter Transitions with React Router and Redux Simple Router Dont Render New Route's Component
<p>I have an app using react @0.14, redux @3.05, react-router @1.0.3, and redux-simple-router @2.0.2. I'm trying to configure onEnter transitions for some of my routes based on store state. The transition hooks successfully fire and push new state to my store, which changes the url. However, the actual component that is rendered on the page is the original component handler from the route match, not the new component handler for the new url.</p>

<p>Here is what my <code>routes.js</code> file looks like</p>

<pre><code>export default function configRoutes(store) {
  const authTransition = function authTransition(location, replaceWith) {
    const state = store.getState()
    const user = state.user

    if (!user.isAuthenticated) {
      store.dispatch(routeActions.push('/login'))
    }
  }

  return (
    &lt;Route component={App}&gt;
      &lt;Route path="/" component={Home}/&gt;
      &lt;Route path="/login" component={Login}/&gt;
      &lt;Route path="/dashboard" component={Dashboard} onEnter={authTransition}/&gt;
      &lt;Route path="/workouts" component={Workout} onEnter={authTransition}&gt;
        &lt;IndexRoute component={WorkoutsView}/&gt;
        &lt;Route path="/workouts/create" component={WorkoutCreate}/&gt;
      &lt;/Route&gt;
    &lt;/Route&gt;
  )
}
</code></pre>

<p>Here is my <code>Root.js</code> component that gets inserted into the DOM</p>

<pre><code>export default class Root extends React.Component {
  render() {
    const { store, history } = this.props
    const routes = configRoutes(store)

    return (
      &lt;Provider store={store}&gt;
        &lt;div&gt;
          {isDev ? &lt;DevTools /&gt; : null}
          &lt;Router history={history} children={routes} /&gt;
        &lt;/div&gt;
      &lt;/Provider&gt;
    )
  }
}
</code></pre>

<p>To clarify, if I go to '/workouts', it will fire the onEnter authTransition hook, dispatch the redux-simple-router push action, change the url to '/login', but will display the Workout component on the page. Looking in Redux DevTools shows that <code>state -&gt; router -&gt; location -&gt; pathname</code> is '/login'.</p>

<p>The state flow is</p>

<ol>
<li>@@INIT</li>
<li>@@ROUTER/UPDATE_LOCATION (/workouts)</li>
<li>@@ROUTER/UPDATE_LOCATION (/login)</li>
</ol>

<p>Am I passing the store to the routes incorrectly? I can't figure out why the next Router/Update_Location doesn't work</p>