How to detect URL changes in UmiJS React Web application?

Question

There is BasicLayout.jsx in my application which pass down the props for main components and render the child components inside the layout. I want to perform some logic depends on URL changes inside the useEffect() of BasicLayout.jsx. Is there any efficient way to detect any URL changes with useLocation hook?

Answer 1

In this case that I want to re-render the BasicLayout.tsx, I used useHistoy() hook instead of useLocation() and passed the current URL pathname as dependency to the useEffect().

Here is the code snippet:

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

  let url = useHistory();

  useEffect(() => {
     ...
     // perform some logic
     ...
  }, [currentUser, declaration, url.location.pathname]);