I repeatedly get a Could not find router reducer in state tree, it must be mounted under "router"
error when I do a dispatch(push("/"));
call.
index.tsx
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<Switch>
<Route exact path="/" component={HomeScreenContainer} />
<Route exact path="/login" component={LoginScreenContainer} />
</Switch>
</ConnectedRouter>
</Provider>,
document.getElementById('root'),
);
configureStore.ts
export const history = createBrowserHistory();
export default function configureStore(preloadedState?: any) {
const store = createStore(
createRootReducer(history),
preloadedState,
composeWithDevTools(applyMiddleware(thunk, routerMiddleware(history))),
);
return store;
}
reducers.ts
const createRootReducer = (history: History<any>) =>
combineReducers({
router: connectRouter(history),
login: LoginReducer,
});
export default createRootReducer;
Upon clicking a submit button on my login form, I dispatch to a loginAsync
action creator:
export const loginAsync = (login: LoginCredentials) => {
return (dispatch: any) => {
if (login.username != 'me@example.com' || login.password != '1234') {
dispatch({
type: SET_LOGIN_ERROR_MESSAGE,
message: 'Invalid username/password',
});
} else {
console.log('SUCCESS LOGIN');
dispatch(replace('/')); // ERROR HERE
}
};
};
My console shows that the SUCCESS LOGIN
message is printed but the above error message shows immediately following.
If I look at the URL, the URL appears to navigate to the proper path "/" but the screen still shows the login form and not my homepage.
Any help would be greatly appreciated.