onEnter Transizioni con React Router e Redux Simple Router non rendono il nuovo componente del percorso

Question

Ho un'app che utilizza react @ 0.14, redux @ 3.05, react-router @ 1.0.3 e redux-simple-router @ 2.0.2. Sto cercando di configurare le transizioni onEnter per alcuni dei miei percorsi in base allo stato del negozio. I hook di transizione sparano con successo e spingono il nuovo stato nel mio negozio, che cambia l'URL. Tuttavia, il componente effettivo visualizzato nella pagina è il gestore del componente originale della corrispondenza della route, non il nuovo gestore di componenti per il nuovo URL.

Ecco quello che il mio file routes.js assomiglia

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> 
) 
} 

Ecco il mio Root.js componente che viene inserito nel 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> 
    ) 
    } 
} 

per chiarire, se vado a '/ gli allenamenti', è attiverà il hook onEnter authTransition, invierà l'azione push redux-simple-router, cambierà l'url in '/ login', ma mostrerà il componente Workout sulla pagina. Guardare in Redux DevTools mostra che state -> router -> location -> pathname è '/ login'.

Il flusso è stato

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

Perchè sono di passaggio il negozio per le rotte in modo errato? Non riesco a capire perché il prossimo Router/Update_Location non funziona

Answer 1

Si scopre che si desidera utilizzare il react-router api (sostituire), non il redux-simple-router per controllare le transizioni.

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() 
} 

Inoltre, fare attenzione. Ho visto molta documentazione là fuori per la sostituzione del router di reazione in cui si passa un singolo oggetto. Questo è per react-router 2.0-rc *. Se si utilizza react-router 1.0, si desidera passare sostituire 3 argomenti separati.