#NavLink and Link don't work together with history.listen()

1 messages · Page 1 of 1 (latest)

shadow elm
#

Pseudocode implementing an issue:

import { NavLink, Link } from "react-router-dom";
import { createBrowserHistory } from "history";

export default function App () {
  let history = createBrowserHistory();

  history.listen(({ location, action }) => {
    console.log(location);
  });
   return (
      <>
        <nav>
          <Link to="/venues">Venues</Link>
          <NavLink to="/events">Events</NavLink>
        </nav>
      </>
    )
}

So, history.listen doesn't emit console.log(location) when I go to the links and the URL is changing in the address bar.

But on the page https://reactrouter.com/en/main/start/concepts you write this:

let history = createBrowserHistory();
history.listen(({ location, action }) => {
  // this is called whenever new locations come in
  // the action is POP, PUSH, or REPLACE
});

Is it an issue?

mighty prism
#

If you create a history object yourself you have to pass it to the Router component afaik, otherwise the router will create another history object and your links will use that one

shadow elm
#

Thanks. But how to access the history object that the router creates? I did not find instructions about that.

mighty prism
shadow elm
#

I got it. Thank you!