Connected-react-router: <ConnectedRouter> imports <Router> from wrong module

[alexseitsinger]

function App({ store, history }) {
    return (
        <Provider store={store}>
            <ConnectedRouter history={history}>
                <Layout>
                    <Switch>
                        <Route path={"/"} exact component={LoadableLandingPage} />
                        <Route path={"/about"} exact component={LoadableAboutPage} />
                        <Route path={"/resume"} exact component={LoadableResumePage} />
                        <Route
                            path={"/portfolio"}
                            exact
                            component={LoadablePortfolioPage}
                        />
                        <Route path={"*"} component={LoadableNotFoundPage} />
                    </Switch>
                </Layout>
            </ConnectedRouter>
        </Provider>
    )
}

When using ConnectedRouter, I receive the error:

Message: You should not use

However, when I use:

import { Router } from "react-router-dom"

I no longer receive this error. Looking into this, I noticed that ConnectedRouter uses:

import { Router } from "react-router"

When I attempted to use this manually, I received the original error again.

I believe the { Router } import should be updated to import from "react-router-dom" instead of "react-router".

Thanks

[antgonzales]

@alexseitsinger can you provide the versions of your packages? Also, what's the contents of the Layout component and is it possible that it's not rendering the children correctly?

[embiem]

Quick comment: Had the same issue. Reason was that the installed react-router-dom was at v 4.4.0-beta.6 and react-router at version 4.3.1

Had to use exact versions in my all package.json files (we're using yarn's workspaces feature) and re-install the dependencies.

TL;DR: Check that the react-router and react-router-dom packages in your node_modules folder are at the same version.

[alexseitsinger]

@alexseitsinger can you provide the versions of your packages?

• "react-router": "4.4.0-beta.6"
• "react-router-dom": "4.3.1"

I managed to resolve the issue thanks to @embiem's response. I appreciate your swift reply though.

Quick comment: Had the same issue. Reason was that the installed react-router-dom was at v 4.4.0-beta.6 and react-router at version 4.3.1

Had to use exact versions in my all package.json files (we're using yarn's workspaces feature) and re-install the dependencies.

TL;DR: Check that the react-router and react-router-dom packages in your node_modules folder are at the same version.

That was it - thanks for sharing. It resolved my issue.