4

I'm implementing an app with plenty of tables that works with the react-router perfectly, reading the URL query etc.

Now I need to put one of the tables inside a modal (I'm using AntUI Modal component for this purpose). From this table I can change the URL query in the browser by using history:

import createHistory from 'history/createBrowserHistory';

export const history = createHistory()
...
history.push({ search: 'my search here' });

The problem is that the URL changes are not visible for the table inside the modal. I've tried wrapping the component in withRouter HOC but it did not help, so I assume that the problem is that the modal is not laying inside the <Router> component.

Can it be easily fixed? Or maybe my whole thought process is wrong?

mdmb
  • 4,833
  • 7
  • 42
  • 90

1 Answers1

1

If anyone is going to face a similar issue - just pass the router props (match, location, history) directly to the children of Modal component.

mdmb
  • 4,833
  • 7
  • 42
  • 90
  • 2
    Have you found a solution to using `` directly without the [fallback of manually pushing to history](https://stackoverflow.com/questions/57357366/how-to-use-link-react-router-inside-mui-popover?noredirect=1&lq=1#comment101202045_57357366)? – bluenote10 Apr 09 '21 at 16:05