I have the following route "/event/:eventId"

When the user es from the homepage and then clicks on a card, it redirects to the event page (Everything working fine until now)

But inside of the event page, I have other cards that redirect to other events pages with different IDs as route params, and clicking on then just change the path but doesn't re-render the page.

It seems that if i'm in a page with the same pathname, doesn't matter if the route params change, it won't re-render the page.

I tried to use a <Link> ponent instead of the history.push but it doesn't work either.

That's the redirect function:

 const onCardClick = () => {
    history.push(
      EVENT_PAGE_LOCATION.toUrl({
        eventId: event?.id,
      }),
    );
  };

I have the following route "/event/:eventId"

When the user es from the homepage and then clicks on a card, it redirects to the event page (Everything working fine until now)

But inside of the event page, I have other cards that redirect to other events pages with different IDs as route params, and clicking on then just change the path but doesn't re-render the page.

It seems that if i'm in a page with the same pathname, doesn't matter if the route params change, it won't re-render the page.

I tried to use a <Link> ponent instead of the history.push but it doesn't work either.

That's the redirect function:

 const onCardClick = () => {
    history.push(
      EVENT_PAGE_LOCATION.toUrl({
        eventId: event?.id,
      }),
    );
  };

• javascript
• reactjs
• react-router
• frontend

• are you using history from react-router history or window.history? , onClick =() =>{props.history.push({'event/${id}'})} – Ebrahim ElSayed Commented Jun 16, 2020 at 22:46

2 Answers 2

So turns out that the pages were being re-rendered but they weren't getting unmounted and in order to execute the graphql queries again.

So that's an important thing, React Router does not unmount the pages.

I had to refetch the queries everytime that the params changed:

useEffect(() => { 
 refetchEvent()
}, [params])

The ponent will re-render on route change. See below, which also works if you replace the Link with an onClick element pushing to the history object. I suspect the issue is that the content of the ponent has no relation to the id you are pushing. Make sure that the props passed to the ponent in the route reflect that id, or otherwise that the ponent determines its own content based on the id parameter when it mounts/changes.

const {
  BrowserRouter,
  Link,
  Route
} = window.ReactRouterDOM;

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Route path="/:id" ponent={Child} />
      </BrowserRouter>
    </div>
  );
}

function Child() {
  console.log('rendered');
  const random = Math.floor(Math.random()*10);
  return <Link to={`/${random}`}>Go to {random}</Link>;
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg./react-router-dom/umd/react-router-dom.min.js"></script>
<div id="root"></div>