Ionic React history.push/routerLink doesn't update the page

Hey guys! I’m building an app with Ionic React. I have a master page that displays a list of news, and a detail page displaying a single news. On the news detail page, I have a lit of random news displayed underneath the main news at the top.

Switching from the master page to the detail page works fine. I use the routerLink prop on an IonicCard and that works fine. But on the single news page, the list of news when clicked on, flicks the page, updates the URL but doesn’t update the view. I have to manually reload the page for it to send the request to fetch the new news detail. You’ll find the single news component code below:

import React, { useEffect } from 'react'

import {
  IonButtons,
  IonContent,
  IonHeader,
  IonMenuButton,
  IonPage,
  IonTitle,
  IonToolbar,
  IonCard,
  IonIcon,
  IonCardContent,
  IonCardSubtitle,
  IonCardHeader,
  IonCardTitle,
  IonLoading,
  IonGrid,
  IonRow,
  IonCol,
} from '@ionic/react'

import {
  FacebookShareButton,
  TwitterShareButton,
  TelegramShareButton,
  WhatsappShareButton,
  TelegramIcon,
  WhatsappIcon,
  FacebookIcon,
  TwitterIcon,
} from 'react-share'

import useSingleNews from '../hooks/useSingleNews'
import { RouteComponentProps, Redirect } from 'react-router'
import NewsInterface from '../interfaces/NewsInterface'
import SEO from '../components/SEO'
import { TWITTER_HANDLE } from '../utils/constants'
import colors from '../utils/colors'

interface Props extends RouteComponentProps<{
  newsHash: string
}> { }

const SingleNews: React.FC<Props> = ({ match }) => {
  const { data, loading, error } = useSingleNews(match.params.newsHash)

  useEffect(() => {
    console.log(data)
  }, [data])

  if (loading) return <IonLoading
    isOpen={loading}
    message={`Patientez s'il vous plaît...`}
  />

  if (error) return <Redirect to="/404" />

  const ShareButtons = () => {
    const url = window.location.href
    const title = `${data?.title} - Haïti Info Toutan (HIT)`
    const hashtags = `HIT partage news`

    return (
      <IonRow>
        <IonCol>
          <FacebookShareButton
            url={url}
            quote={title}
            hashtag={hashtags.split(' ').join(' #')}>
            <FacebookIcon size={48} style={{ borderRadius: 4, color: colors.facebook }} />
          </FacebookShareButton>
        </IonCol>
        <IonCol>
          <TwitterShareButton
            url={url}
            title={title}
            via={TWITTER_HANDLE}
            hashtags={hashtags.split(' ')}>
            <TwitterIcon size={48} style={{ borderRadius: 4, color: colors.twitter }} />
          </TwitterShareButton>
        </IonCol>
        <IonCol>
          <WhatsappShareButton url={url} title={title}>
            <WhatsappIcon size={48} style={{ borderRadius: 4, color: colors.whatsapp }} />
          </WhatsappShareButton>
        </IonCol>
        <IonCol>
          <TelegramShareButton url={url} title={title}>
            <TelegramIcon size={48} style={{ borderRadius: 4, color: colors.telegram }} />
          </TelegramShareButton>
        </IonCol>
      </IonRow>
    )
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonMenuButton />
          </IonButtons>
          <IonTitle>{data?.title} - HIT</IonTitle>
        </IonToolbar>
      </IonHeader>

      <IonContent>
        <IonGrid>
          <IonRow>
            <IonCol key={data?.hash} size="12" sizeSm="6">
              <IonCard>
                {!!data?.image_url && (<img src={data?.image_url} alt={data?.title} />)}
                <IonCardHeader>
                  <IonCardSubtitle>{data?.public_date}</IonCardSubtitle>
                </IonCardHeader>
                <IonCardContent>
                  <div dangerouslySetInnerHTML={{ __html: `${data?.body}` }} />
                </IonCardContent>
                {!!data?.ads && (
                  <IonCardHeader>
                    <IonCardSubtitle>
                      <div dangerouslySetInnerHTML={{ __html: `${data?.ads}` }} />
                    </IonCardSubtitle>
                  </IonCardHeader>
                )}

                <IonCardHeader>
                  <ShareButtons />
                </IonCardHeader>
              </IonCard>
            </IonCol>
          </IonRow>


          {data?.randoms ? (
            <>
              <h3 className="ion-padding-horizontal">Autres Nouvelles</h3>
              <IonRow>
                {data?.randoms.map((news: NewsInterface) => (
                  <IonCol key={news.hash} size="12" sizeSm="4" sizeXl="3">
                    <IonCard routerLink={`/n/${news.hash}`}>
                      {!!news.image_url && (<img src={news.image_url} alt={news.title} />)}
                      <IonCardHeader>
                        <IonCardSubtitle>{news.public_date}</IonCardSubtitle>
                        <IonCardTitle>{news.title}</IonCardTitle>
                      </IonCardHeader>
                    </IonCard>
                  </IonCol>
                ))}
              </IonRow>
            </>
          ) : null}
        </IonGrid>
      </IonContent>

      <SEO
        title={`${data?.title}`}
        url={window.location.href}
        description={`${data?.body.split('\n')[0]}`}
        image={data?.image_url}
      />
    </IonPage>
  )
}

export default SingleNews

[elylucas]

Ya, checkout our lifecycle guide which has some info around this: https://ionicframework.com/docs/react/lifecycle

Though, I think in this case, since you were navigating to the same page it was sticking around.

[jgb-solutions]

hey @elylucas thanks a ton! It worked. Even tho I don’t fully understand why, because I thought that each update of the route, would trigger a re-render of the page, and then make a request using a new instance of the hook. But it seems that that’s not what’s happening.

Anyway thanks a lot! I’ve been wondering why it wouldn’t work for days.