onEnter-Übergänge mit Reagieren Router und Redux Einfachen Router Dont Render-Neue Route-Komponente
Ich habe eine app mit reagieren @0.14, redux @3.05, reagieren-router @1.0.3, und redux-einfach-router @2.0.2. Ich bin versucht zu konfigurieren onEnter-übergänge für einige meiner Reiserouten auf der Basis von store-Zustand. Der übergang Haken erfolgreich im Feuer-und push-neuen Zustand in meinem Shop, die zu einer änderung der url. Aber die eigentliche Komponente gerendert wird auf der Seite ist die original-Komponente handler von der route übereinstimmen, nicht die neue Komponente handler für die neue url.
Hier ist, was mein routes.js
- Datei sieht wie
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>
)
}
Hier ist mein Root.js
Komponente, die eingefügt wird in die 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>
)
}
}
Klären, wenn ich gehe zu '/workouts", es wird Feuer die onEnter-authTransition Haken, Versand der redux-einfach-router-push-Aktion, ändern Sie die url in '/login', aber zeigt die Workout-Komponente auf der Seite. Suchen in Redux DevTools zeigt, dass state -> router -> location -> pathname
ist '/login'.
Den Staat fließen, ist
- @@INIT
- @@ROUTER/UPDATE_LOCATION (/Trainingseinheiten)
- @@ROUTER/UPDATE_LOCATION (/login)
Bin ich vorbei den laden, um die Routen falsch? Ich kann nicht herausfinden, warum der nächste Router/Update_Location nicht funktioniert
Du musst angemeldet sein, um einen Kommentar abzugeben.
Stellt sich heraus, das Sie verwenden möchten die reagieren-router-api (ersetzen), nicht die redux-einfach-router zu Steuern, Ihre übergänge.
Auch, seien Sie vorsichtig. Ich sah eine Menge von Dokumentation gibt es für das react-router ersetzen, wo Sie an einem einzigen Objekt. Das ist für reagieren-router-2.0-rc*. Wenn Sie reagieren-router 1.0, sind Sie gehen zu wollen, um pass ersetzen, 3 separate Argumente.