React RouterとReduxを使用したトランジションシンプルなルータは新しいルートのコンポーネントをレンダリングしません

Question

私は、react @ 0.14、redux @ 3.05、react-router @ 1.0.3、およびredux-simple-router @ 2.0.2を使用するアプリを持っています。私は店舗の状態に基づいていくつかの私のルートのonEnterの移行を設定しようとしています。移行フックが正常に起動し、新しい状態を私の店にプッシュすると、URLが変更されます。ただし、ページにレンダリングされる実際のコンポーネントは、新しいURLの新しいコンポーネントハンドラーではなく、ルート一致の元のコンポーネントハンドラーです。ここで

それは、私のroutes.jsファイルはここ

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

のように見える私は「/ワークアウト」に行けば、明確にするために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> 
    ) 
    } 
} 

に挿入されます私のRoot.jsコンポーネントは何かということですonEnter authTransitionフックを起動し、redux-simple-routerプッシュアクションを送出し、URLを '/ login'に変更しますが、ページにWorkoutコンポーネントを表示します。 Reduxを見るDevToolsは、state -> router -> location -> pathnameが '/ login'であることを示しています。

状態フローが

1. ある@@ INIT
2. @@ ROUTER/UPDATE_LOCATION（/トレーニング）
3. @@ ROUTER/UPDATE_LOCATION（/ログイン）

Iパッシングアムルートへのストアは間違っていますか？なぜ次のRouter/Update_Locationが動作しないのかわかりません

Answer 1

あなたのトランジションを制御するためにredux-simple-routerではなくreact-router api（replace）を使いたいと思います。

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

また、注意してください。私は、あなたが単一のオブジェクトを渡す場所を反応ルータが置き換えるためにそこに多くのドキュメントを見ました。それは反応ルータ2.0-rc *のためです。 react-router 1.0を使用している場合は、3つの別々の引数を置き換えて渡したいと思うでしょう。