Блог

Я создаю сайт для отображения недвижимости с помощью React и Ionic.

У меня есть эта маршрутизация в моем 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>
 

И я ссылаюсь на одну "/property/:id" страницу на моем веб-сайте следующим образом:

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

Теперь на моей "/property/:id" странице я могу получить доступ к идентификатору по URL-адресу следующим образом:

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

Проблема в том, что когда я нажимаю назад, чтобы перейти на главный экран, а затем посещаю другую свою "/property/:id" страницу, props.match.params.id она остается прежней. Он не обновляется.

Что можно сделать, чтобы это исправить?

Оказалось, что проблема заключалась в методе жизненного цикла Ionics.

Мое решение состояло в том, чтобы вместо этого использовать эффект следующим образом:

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