Ionic React props.match.params doesn't update

Question

I'm building a site to display real estate with React and Ionic.

I have this routing in my App.tsx

<IonApp>
  <IonReactRouter>
    <Nav />
    <IonRouterOutlet id="first">
      <Route exact path="/" component={Home} />
      <Route exact path="/all-properties" component={Properties} />
      <Route exact path="/property/:id" component={Property} />
    </IonRouterOutlet>
  </IonReactRouter>
</IonApp>

And I link to the single "/property/:id" page in my website like this:

<Link to={"/property/" + variableId}> ... </Link>

Now on my "/property/:id" page I can access the id from the URL like this:

useIonViewDidEnter(() => {
  console.log(props.match.params.id); // This works the first time
});

The problem is, when I click back to say the home screen, and then visit another of my "/property/:id" pages, the props.match.params.id stays the same. It doesn't update.

What could be done to fix it?

Answer 1

It turned out that it was Ionics lifecycle method that was the problem.

My solution was to make a useEffect instead like this:

useEffect(() => {
   console.log(props.match.params.id)
}, [props.match.params.id])