How do I tell Google when page finishes loading with React Router?

Accordinly GSC, for the page https://zoncircle.com/item/5@xxu7o-ziaaa-aaaak-qinrq-cai the "User-declared canonical" is itself what is correct, but "Google-selected canonical" is https://zoncircle.com/item/2@xxu7o-ziaaa-aaaak-qinrq-cai what is wrong.

My guess is that Google reads https://zoncircle.com/item/5@xxu7o-ziaaa-aaaak-qinrq-cai before my code reacts to URL change and therefore before it loads new texts, so Google uses the text from previously loaded Router page.

How using React BrowserRouter (or in other way, if needed) can I explain Google when my page finishes loading, for it to use the finished loaded text?

I use

<Route
  path="/item/:id"
  element={<ShowItem/>}
/>

and const { id: idParam } = useParams(); in <ShowItem/>.

I use both <Link to=...> and navigate(...) for user navigating my site.

You need to sign in to view this answers