“Could not find router reducer” error when using connected-react-router

问题

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.

回答1:

For the sake of helping future souls with this issue, it turns out that according to the linked github discussions, that version 5.0 of the history package is causing the issue and downgrading to version 4.10.1 solves the problem for me.