onEnter Übergänge mit React Router und Redux Simple Router Dont Render New Route Komponente

Question

Ich habe eine App mit react @ 0.14, Redux @ 3.05, React-Router @ 1.0.3 und Redux-Simple-Router @ 2.0.2. Ich versuche OnEnter-Übergänge für einige meiner Routen basierend auf dem Speicherstatus zu konfigurieren. Die Übergangshaken feuern erfolgreich und schieben einen neuen Status in mein Geschäft, wodurch die URL geändert wird. Die tatsächliche Komponente, die auf der Seite gerendert wird, ist jedoch der ursprüngliche Komponentenhandler aus der Routenübereinstimmung, nicht der neue Komponentenhandler für die neue URL.

Hier ist, was meine routes.js Datei wie hier

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

aussieht, ist meine Root.js Komponente, die in das DOM eingefügt werden

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

Um zu klären, ob ich ‚/ Training‘ gehen, es feuert den onEnter-authTransition-Hook, sendet die redux-simple-router-Push-Aktion, ändert die URL in '/ login', zeigt aber die Workout-Komponente auf der Seite an. Suchen in Redux DevTools zeigt, dass state -> router -> location -> pathname '/ login' ist.

Der Strömungszustand ist

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

Bin vorbei I der Laden zu den Routen falsch? Ich kann nicht herausfinden, warum der nächste Router/Update_Location nicht funktioniert.

Answer 1

Es stellt sich heraus, dass Sie den Reaktiv-Router-API (ersetzen), nicht den Redux-Simple-Router verwenden möchten, um Ihre Übergänge zu steuern.

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

Seien Sie auch vorsichtig. Ich habe eine Menge Dokumentation für den react-router replace gesehen, wo du ein einzelnes Objekt passierst. Das ist für react-router 2.0-rc *. Wenn Sie react-router 1.0 verwenden, werden Sie drei separate Argumente ersetzen müssen.