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?

@AaronSaunders I'm not sure what you mean, could you expand? — Julius, Dec 09 '20 at 08:34

Julius · Accepted Answer · 2021-09-19T02:24:12.023

4

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])

edited Sep 19 '21 at 02:24

answered Dec 09 '20 at 08:52

Julius

218
3
16

2

Thanks, was stuck on this forever. Didn't expect that useIonViewDidEnter wouldn't have the props ready... FYI it also works with the `useParams()` hook from `react-router-dom` instead of `props.match.params.id` – joeck Jun 05 '22 at 21:57
It works great with useIonViewWillEnter and multiple params also, thanks – adia Sep 22 '22 at 16:40

Ionic React props.match.params doesn't update

1 Answers1