Property 'listen' does not exist on type 'NavigateFunction'

Viewed 542

new to Typescript and react..I updated useHistory to useNavigate in react-router-dom v6.

In the useEffect hook navigate.listen(e) => { returns the error Property 'listen' does not exist on type 'NavigateFunction' and I can not figure out why. Could someone help me?

enter image description here

enter image description here

enter image description here

1 Answers

This is how route changes can be captured in react-routerv6:

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

const MyComponent = () => {
  const location = useLocation()

  React.useEffect(() => {
    // triggered on route change
    console.log('new route: ', location)
  }, [location])
  ...
}

Docs: https://reactrouter.com/docs/en/v6/api#uselocation

Related