Redux 路由器 pushState 函数未触发 URL 更改答案

【问题标题】：Redux router pushState function not triggering URL changeRedux 路由器 pushState 函数未触发 URL 更改
【发布时间】：2016-10-14 21:39:41
【问题描述】：

我已经按照示例here 尝试创建一个基本的认证区域对于我的应用程序，这是我原则上非常喜欢的解决方案。这是我的index.js：

const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <Router history={hashHistory}>
        <Route path="/" component={App}>
        <IndexRedirect to="authenticated" />
          <Route path="setup" component={SetupJourney} >
            <Route path="details" component={Details}/>
            <Route path="account" component={AccountType}/>
          </Route>
          <Route path="authenticated" component={requireAuthentication(secretPage)} />
      </Route>
    </Router>
  </Provider>,
  document.getElementById('root')
);

然后这是我的 AuthenticatedComponent 处理重定向的高阶组件：

export function requireAuthentication(Component) {

class AuthenticatedComponent extends React.Component {

    componentWillMount() {
        this.checkAuth();
    }

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

    checkAuth() {
        if (!this.props.isAuthenticated) {
            this.props.dispatch(pushState(null, '/setup/details', ''));
        }
    }

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

    }
}

const mapStateToProps = (state) => ({
    isAuthenticated: state.get('user').get('isAuthenticated')
});

return connect(mapStateToProps)(AuthenticatedComponent);

}

我多年来一直在玩这个，但我无法让组件重定向。在 Redux 开发工具中，我可以看到 @@reduxReactRouter/historyAPI 操作已触发，但 URL 没有改变。所有相关的道具/状态等似乎也已经到位......我错过了什么吗？

谢谢

【问题讨论】：

标签： redux-router

【解决方案1】：

对于遇到此问题的任何人，我最终解决了此问题，但存在一些问题。首先，pushState 只适用于 browserHistory，所以我需要从 hashHistory 切换。

在此之后 pushState 仍然不起作用。当以错误的顺序指定中间件时，这可以apparently happen。我重组了我的 index.js 以遵循 Redux 的 real world example 中的模式，最终一切正常。

关键是我现在有一个store.js 文件，看起来像这样：

import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import { routerReducer, routerMiddleware} from 'react-router-redux';
import { browserHistory } from 'react-router';
import reducer, { INITIAL_STATE } from '../reducers/reducer';

const rootReducer = combineReducers({reducer, routing: routerReducer});
const composeEnhancers =
process.env.NODE_ENV !== 'production' &&
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
  }) : compose;

const enhancer = composeEnhancers(
  applyMiddleware(routerMiddleware(browserHistory))
);

const initialState = {'reducer': INITIAL_STATE};

export default function configureStore() {
  return createStore(rootReducer, initialState, enhancer);
}

【讨论】：