Browser router doesn't work with react-router-dom 4.3.1

[Puspendert]

I am having below router configuration

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <RouteWrapper />
        </ConnectedRouter>
      </Provider>
    );
  }
}

const RouteWrapper = props => {
    return (
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/home" component={Home} />
          <Route path="/profile" component={Profile} />
          <Route path="/settings" component={Settings} />
          <Route component={NotFound} />
        </Switch>
    );
};

 const mapStateToProps = () => ({});

export default connect(
  mapStateToProps
)(RouteWrapper);

So this configuration doesn't work if I use react-router-dom 4.3.1. I am having this Component to test the router functionality

export default class Home extends Component {
  render() {
    return (
      <div>
        <Link to="/profile">profile</Link>
        <br />
        <Link to="/settings">settings</Link>
        <br />
        <Link to="/unknown">unknown</Link>
      </div>
    );
  }
}

If I click on the <Link to="/profile">profile</Link>, the browser takes me to the "/profile" page, perfect. But now if I use the back/forward buttons of browser, the URL(even the redux state) gets changes but the component doesn't get rendered as per the URL.

This issue comes up when connect() is used by the RouteWrapper component.

However this issue got resolved with the latest release of react router. I tried the same routers with react-router-dom: 5.0.0, and everything works fine with this.

I just want to know, was that a known issue? I didn't find any issue/SO question for this. And what was the issue btw?

[baronnoraz]

How did you get it to work with react-router-dom? In my package.json I have a dependency on connected-react-router 6.3.2 and react-router-dom 5.0.0. Whenever I try to compile my code I get

Module not found: Can't resolve 'react-router' in 'node_modules/connected-react-router/esm'

[Puspendert]

Please show your package.json

[baronnoraz]

Here's my full package.json

{
  "name": "client",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^1.2.1",
    "antd": "^3.15.2",
    "axios": "^0.18.0",
    "connected-react-router": "^6.3.2",
    "history": "^4.7.2",
    "react": "^16.8.2",
    "react-dom": "^16.8.2",
    "react-flexview": "^4.0.3",
    "react-redux": "^6.0.0",
    "react-router-dom": "^5.0.0",
    "react-scripts": "^2.1.8",
    "redux": "^4.0.1",
    "redux-saga": "^1.0.1",
    "reselect": "^4.0.0",
    "typesafe-actions": "^3.2.0"
  },
  "devDependencies": {
    "@types/history": "^4.7.2",
    "@types/jest": "24.0.5",
    "@types/node": "11.9.4",
    "@types/react": "16.8.3",
    "@types/react-dom": "16.8.1",
    "@types/react-redux": "^7.0.1",
    "@types/react-router-dom": "^4.3.1",
    "babel-plugin-import": "^1.11.0",
    "customize-cra": "^0.2.12",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "react-app-rewired": "^2.1.1",
    "redux-devtools-extension": "^2.13.8",
    "typescript": "3.3.3"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://localhost:3000"
}

The error that I get when I start the app is...

./node_modules/connected-react-router/esm/selectors.js Module not found: Can't resolve 'react-router' in 'node_modules/connected-react-router/esm'

If I remove the react-router-dom dependencies and replace them with react-router dependencies. Everything works fine.

-    "react-router-dom": "^5.0.0",
+    "react-router": "^5.0.0",
...
-    "@types/react-router-dom": "^4.3.1",
+    "@types/react-router": "^4.4.5",

My understanding from the ReactTraining site is that react-router-dom re-exports all of react-router's exports and is what I should be using for web development (as opposed to react-router-native).

[psdao1102]

Not a contributor, but i had this exact problem. If i reference both [email protected], and [email protected] and [email protected] in my package.json it seems to work.

[xesf]

Have the same issue while trying to use the latest versions:

"dependencies": { "@aspnet/signalr": "^1.1.4", "axios": "^0.18.0", "connected-react-router": "^6.4.0", "history": "^4.7.2", "iso-639-1": "^2.0.3", "moment": "2.24.0", "numbro": "^2.1.2", "prop-types": "^15.7.2", "querystring": "^0.2.0", "react": "^16.8.6", "react-custom-scrollbars": "^4.2.1", "react-dom": "^16.8.6", "react-redux": "^6.0.1", "react-router": "^5.0.0", "react-router-dom": "^5.0.0", "redux": "^4.0.1", "redux-react-hook": "^3.0.4", "redux-saga": "0.16.2", "reselect": "^4.0.0" }

Even if I do change to previous versions 5 or 6 I get the same exception.

[baronnoraz]

I haven't had any issues as long as I include the react-router dependency. react-router and react-router-dom should basically expose the same components. You shouldn't need both, but connected-react-router explicitly depends upon react-router. What's the exact error message that you're getting? Have you tried blowing away the npm_modules directory and re-installing all of the dependencies?

[xesf]

Thanks for the reply. Yeah, did all that but it turns out some of the libraries I was using had a dependency of an older version of react-router which was causing the module not to be loaded.

Using the latest versions now and it's working fine.

"dependencies": { "@aspnet/signalr": "1.1.2", "axios": "^0.18.0", "connected-react-router": "^6.4.0", "history": "4.7.2", "iso-639-1": "^2.0.3", "moment": "2.24.0", "numbro": "^2.1.2", "prop-types": "15.7.2", "querystring": "^0.2.0", "react": "16.8.3", "react-custom-scrollbars": "4.2.1", "react-dom": "16.8.3", "react-redux": "^7.0.2", "react-router": "^5.0.0", "react-router-dom": "^5.0.0", "redux": "4.0.1", "redux-react-hook": "^3.0.4", "redux-saga": "0.16.2", "reselect": "^4.0.0" },

[janzenz]

As @baronnoraz mentioned

You shouldn't need both, but connected-react-router explicitly depends upon react-router.

We're using [email protected] and we solved it by installing both react-router and react-router-dom but I think this will increase our bundle size.

Has this been solved in the later version of connected-react-router?