Redux router pushState function not triggering URL change - redux-router

Question

I have followed the example here to try and create a basic authenticated area
for my app, which is a solution I really like in principle. Here is my 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')
);
and then here's my AuthenticatedComponent higher-order component to handle redirects:
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);
}
I've been playing about with this for ages and I cannot get the component to redirect. In Redux dev tools I can see the ##reduxReactRouter/historyAPI action has fired, but the URL doesn't change. All the relevant props/state etc seem to be in place too...is there something I've missed?
Thanks

Answer 1

For anyone coming across this, I eventually resolved this and there were a few problems. Firstly, pushState is only for use with browserHistory, so I needed to switch from hashHistory.
After this the pushState still did not work. This can apparently happen when middleware is specified in the wrong order. I restructured my index.js to follow the pattern in Redux's real world example, and everything eventually worked.
The key bit is I now have a store.js file that looks like this:
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);
}