0

If we wanted to change route programatically inside redux, we used to use react-router-redux npm package. However it was archived by its author. Now the recommended solution is connected-react-router:

https://www.npmjs.com/package/connected-react-router

But as the docs say in this package, it should be used INSTEAD of react-router to make it work.

Normally I was using react-router-dom:

import { BrowserRouter } from 'react-router-dom';

<BrowserRouter>
   <Route path='/' />
   <Route path='/hey' />
</BrowserRouter>

But as the docs say, I have to replace react-router v4/v5 with ConnectedRouter from package:

import { ConnectedRouter } from 'connected-react-router';

<ConnectedRouter history={history}>
   <Route path={'/'} />
   <Route path={'/foo'} />
</ConnectedRouter>

But this situation causes problem with Link from react-router-dom. Link has to be placed inside BrowserRouter, but I CANT USE IT because there's no BrowserRouter because AS THE DOCS ARE SAYIN - "Remember to delete any usage of BrowserRouter or NativeRouter as leaving this in will cause problems synchronising the state."

Problem is that ConnectedRouter is a connected version of react-router, not react-router-dom, so theres nothing like Link or NavLink in it.

There must be some way, if not I believe this package wouldnt have 3k stars on github...

Question: How to use Link inside ConnectedRouter? Thanks!

Patrickkx
  • 1,740
  • 7
  • 31
  • 60

1 Answers1

1

I recommend you to stick to to react-router-dom only.

There is no need for connecting it to redux anymore. In the past there could be a reason because it was hard to read the current pathname or search param, since only main page components were receiveing these as location. But right now you can read from anywhere thanks to withRouter.

Also you can use history to push routes. This was also a headache in the past.

FurkanO
  • 7,100
  • 5
  • 25
  • 36