Component not rendering latest data created when using <Link>

Question

What is difference in React between writing url directly and using the below link.

Here is some code:

<Link onClick={() => history.push('/notification')}>My alerts</Link>

Here is the component that is redirected to when user click link my alerts.

const { data: employer, loading, error, refetch } = useQuery<Account>(AccountQuery)
  const [deleteSearchSubscription] = useMutation(DeleteSearchSubscriptionMutator, {
    onError: error => console.error(error),
    onCompleted: () => refetch(),
  })

UPDATE:

<Router>
        <Header />
        <Page>
          <Switch>
            <Route path="/notification">
              <EmailNotifications />
            </Route>
            <Route path="/error-page">
              <PageNotFound />
            </Route>
            <Route path="/not-found">
              <ErrorPage />
            </Route>
            <Route path="/login">
              <Login />
            </Route>
          </Switch>
        </Page>
        <Footer />
      </Router>

any idea why when writing directly to url my component gets rendered with the latest data from backend while clicking on link it does not get the latest data from backend, why is this behavior?

Answer 1

I think we need to see more of your code, but are you trying to refresh? Because that link look good even I think this is better form

<Link to="/notification">My alerts</Link>

But if you are trying to reload and you are already on yoursite.com/notification , it will not work

But I cannot tell from the code you've provided if this is the case

If yes you need to redirect to other path and than back to /notification

UPDATE:

What Router do you use?

Basic Route component from React-router looks like this

<Route path="/notification" component={EmailNotifications} /> 

With no children

See: https://reacttraining.com/react-router/web/api/Route/component

Answer 2

Link has props to . So you don't need onClick

<Link to='/notification'>My alerts</Link>

Answer 3

adding:

  useEffect(() => {
    refetch()
  })

fixed the issue!