onEnter Transitions with React Router and Redux Simple Router Dont Render New Route's Component

Question

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.

Here is what my routes.js file looks like

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 (
    <Route component={App}>
      <Route path="/" component={Home}/>
      <Route path="/login" component={Login}/>
      <Route path="/dashboard" component={Dashboard} onEnter={authTransition}/>
      <Route path="/workouts" component={Workout} onEnter={authTransition}>
        <IndexRoute component={WorkoutsView}/>
        <Route path="/workouts/create" component={WorkoutCreate}/>
      </Route>
    </Route>
  )
}

Here is my Root.js component that gets inserted into the DOM

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

    return (
      <Provider store={store}>
        <div>
          {isDev ? <DevTools /> : null}
          <Router history={history} children={routes} />
        </div>
      </Provider>
    )
  }
}

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 state -> router -> location -> pathname is '/login'.

The state flow is

1. @@INIT
2. @@ROUTER/UPDATE_LOCATION (/workouts)
3. @@ROUTER/UPDATE_LOCATION (/login)

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

Marconigraph

Answer 1

Turns out you want to use the react-router api (replace), not the redux-simple-router to control your transitions.

const authTransition = function authTransition(nextState, replace, callback) {
  const state = store.getState()
  const user = state.user

  // todo: in react-router 2.0, you can pass a single object to replace :)
  if (!user.isAuthenticated) {
    replace({ nextPathname: nextState.location.pathname }, '/login', nextState.location.query)
  }

  callback()
}

Also, be careful. I saw a lot of documentation out there for the react-router replace where you pass a single object. That's for react-router 2.0-rc*. If you're using react-router 1.0, you're going to want to pass replace 3 separate arguments.

Marconigraph

You don't show your imports and you mention 'push' but call 'replace'. Can you please show a bit more about what comes from where? Also which History are you using (from History or from React Router) - if 1.0 I assume History, but just so it's clear... – Ruggles

replace is a param in the react-router onEnter callback. sorry, didn't think the imports were necessarily relevant to the answer, version numbers are mentioned in the question. thanks for pointing out the push. was poor word choice – Marconigraph

This looks close to what I am trying to solve. Where does the store come from? ... I see it now.... – Strapping

Where is third parameter in authTransition (callback) set? I am having issues because checking authentication status is async api call to a backend server...not a synchronous call to client-side function – Artichoke