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
- @@INIT
- @@ROUTER/UPDATE_LOCATION (/workouts)
- @@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
