Connected-react-router: Using Link from react-router-dom doesn't call the @@router/LOCATION_CHANGE action

[haruki-m]

I tried to navigate from one page to another like the following:

import { Button } from '@material-ui/core';
import { Link } from 'react-router-dom';

// render
<Button
  component={Link}
  to="/to/some/path"
>
  {'Click me'}
</Button>

When clicking this button, the app successfully navigates to /to/some/path, but the @@router/LOCATION_CHANGE action is not called, so the redux store still thinks I'm on the previous page.

I also tried using the history object by doing something like

// render
<Button
  onClick={() => props.history.push('to/some/path')}
>
  {'Click me'}
</Button>

but now @@router/LOCATION_CHANGE gets called and the app doesn't navigate!

Please help! Thanks!

[haruki-m]

I can't believe I found the solution after struggling with this for a long time and right after posting this issue...

I switched from BrowserRouter (react-router-dom) to Router (react-router) and passed in the history object and now everything works magically (Link method and history.push method) :)

import { Router } from 'react-router';

// render
<Router history={props.history}>
...

[guilhermearajorocha]

I can't believe I found the solution after struggling with this for a long time and right after posting this issue...

I switched from BrowserRouter (react-router-dom) to Router (react-router) and passed in the history object and now everything works magically (Link method and history.push method) :)

import { Router } from 'react-router';

// render
<Router history={props.history}>
...

Maaaan! Thank you very much! Bring an oscar to this man!
Worked for me too!