react-router-redux不改變內容/視圖

Question

我有這樣設置react-router-redux example。但是dispatch(push(url))不會更改地址欄上的內容/視圖和網址。即使從我的控制檯，我可以看到LOCATION_CHANGE和CALL_HISTORY_METHOD已成功調用我的給定地址。在這種情況下，如果登錄成功，則不會加載預期的redirect地址。

在行動的標誌

export function loginUser(email, password, redirect="/dashboard") { 
    return function(dispatch) { 
    dispatch(loginUserRequest()); 
    return fetch(`http://localhost:3000/users/sign_in/`, { 
     ... 
    }) 
    .then(parseJSON) 
    .then(response => { 
     try { 
     let decoded = jwtDecode(response.token); 
     dispatch(loginUserSuccess(response.token)); 
     dispatch(push(redirect)); 
     } catch (e) { 
     ... 
     } 
    }) 
    } 
} 

routes.js

import React from 'react'; 
import { Router, Route, browserHistory, IndexRoute } from 'react-router'; 
import { syncHistoryWithStore } from 'react-router-redux' 
... 
import store from '../store'; 

const history = syncHistoryWithStore(browserHistory, store) 

let Routes = 
    <Router history={history}> 
    <Route path='/' component={MainContainer}> 
     <IndexRoute component={Home} /> 
     <Route path='/sign_in' component={SigninForm} /> 
     <Route path='dashboard' component={authenticateComponent(Dashboard)} /> 
    </Route> 
    </Router> 

export default Routes; 

store.js

import { createStore, applyMiddleware, compose } from 'redux' 
import thunkMiddleware from 'redux-thunk' 
import createLogger from 'redux-logger' 
import reducers from './reducers'; 

const createStoreWithMiddleware = compose(
    applyMiddleware(
    thunkMiddleware, 
    createLogger() 
) 
) 

const store = createStore(reducers, createStoreWithMiddleware); 

export default store; 

AuthenticateComponent.js

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { push } from 'react-router-redux'; 

export function authenticateComponent(Component) { 

    class AuthenticateComponent extends Component { 

    componentWillMount() { 
     this.checkAuth(this.props.isAuthenticated); 
    } 

    componentWillReceiveProps (nextProps) { 
     this.checkAuth(nextProps.isAuthenticated); 
    } 

    checkAuth (isAuthenticated) { 
     if (!isAuthenticated) { 
     let redirectAfterLogin = this.props.location.pathname; 
     this.props.dispatch(push(`/sign_in?next=${redirectAfterLogin}`)); 
     } 
    } 

    render() { 
     return (
     <div> 
      {this.props.isAuthenticated === true 
      ? <Component {...this.props}/> 
      : null 
      } 
     </div> 
    ) 
    } 
    } 

    const mapStateToProps = (state) => ({ 
    token: state.auth.token, 
    isAuthenticated: state.auth.isAuthenticated 
    }); 

    return connect(mapStateToProps)(AuthenticateComponent); 

} 

我已將routing: routerReducer放入我的聯合減速器中。這可能是什麼問題？

Answer 1

原來我需要應用routerMiddleware以及