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 ponent that is rendered on the page is the original ponent handler from the route match, not the new ponent 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 ponent={App}>
<Route path="/" ponent={Home}/>
<Route path="/login" ponent={Login}/>
<Route path="/dashboard" ponent={Dashboard} onEnter={authTransition}/>
<Route path="/workouts" ponent={Workout} onEnter={authTransition}>
<IndexRoute ponent={WorkoutsView}/>
<Route path="/workouts/create" ponent={WorkoutCreate}/>
</Route>
</Route>
)
}
Here is my Root.js ponent 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 ponent 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
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 ponent that is rendered on the page is the original ponent handler from the route match, not the new ponent 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 ponent={App}>
<Route path="/" ponent={Home}/>
<Route path="/login" ponent={Login}/>
<Route path="/dashboard" ponent={Dashboard} onEnter={authTransition}/>
<Route path="/workouts" ponent={Workout} onEnter={authTransition}>
<IndexRoute ponent={WorkoutsView}/>
<Route path="/workouts/create" ponent={WorkoutCreate}/>
</Route>
</Route>
)
}
Here is my Root.js ponent 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 ponent 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
Share Improve this question edited Mar 9, 2016 at 23:59 Jeremy Banks - Vive le Canada 130k88 gold badges358 silver badges381 bronze badges asked Jan 21, 2016 at 16:52 JonJon 6,2654 gold badges23 silver badges33 bronze badges1 Answer
Reset to default 12Turns 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.