react-router: params changing on parent route when navigating to nested / child route

[alexfoxy]

I'm using nested child routes to show & hide modals when the route changes. For example I have the route users and then when pressing a user it navigates to users/:id. This presents a modal component with the user info. This works fine however we want fetch data when a route is navigated to, e.g. the user list, or the user data. I'm trying to do this with a useEffect e.g.

  const params = useParams()
  const viewModel = MyScreenViewModel()

  useEffect(() => {
    console.log(window.location.pathname, params)
    viewModel.fetchSomeData(params)
  }, [ params ])

The issue I'm having is that the useEffect is triggered on the parent page when the child route is opened because the route params change. The log from the above example looks like this.

# First load
/users  {}

# After showing a modal
/users/1  { id: 1 }

This means that the parent page is running the useEffect whenever you open a modal, and as we're using this to fetch data it's not really ideal. We can't use the loader functionality on the route because we need to pass the ViewModel to that function which isn't supported.

Does anyone have any ideas on how to work around this?

Thanks,
Alex