Using `data-umami-event` causes a full page reload when clicking the same route repeatedly

[AlaminPu1007]

Describe the Bug

When using data-umami-event on a <Link> component in a Next.js application, clicking the same route multiple times causes a full page reload instead of maintaining client-side navigation. This behavior bypasses Next.js' routing mechanism, which should prevent hard reloads when navigating to the same route.

Steps to Reproduce

1. Add data-umami-event to a <Link> component in a Next.js application

<Link href="/some-route" data-umami-event="button-click">Go to Route</Link>

2. Navigate to the route by clicking the link.
3. Click the same link again while on the same route.

Expected Behavior

Next.js should handle the navigation without triggering a hard reload, keeping the navigation smooth and client-side.

Actual Behavior

Clicking the link again causes a full page reload, even though it navigates to the same route, disrupting the expected smooth navigation flow in the application.

Environment

1. Next.js Version - 14.2.3
2. Umami Version - 2.11.3

Database

PostgreSQL

Which Umami version are you using? (if relevant)

2.11.3

Which browser are you using? (if relevant)

Chrome latest

[mikecao]

Can you try putting the attribute on a wrapper element?

<div data-umami-event="button-click">
  <Link href="/">Go to route</Link>
</div>

[AlaminPu1007]

It's working after following your approach.

[fra-iesus]

Hi @mikecao, I'm experiencing the same issue, and I must admit that I find the suggested workaround unsatisfactory as it often leads to significant code changes in SPAs. After quickly reviewing the JavaScript part of the code, I understand the underlying reason for the problem. However, I believe it could be resolved more elegantly by utilizing navigator.sendBeacon() instead of preventing the default behavior and then manually updating location.href for non-external links. Do you happen to know who might be responsible for this part of the code and whom I could address this suggestion to? Thanks.

[laurent-d]

Hi @mikecao, i have the same issue on static old school html website with a ajax loading page on every pages. I try your workaround but the effect is links are no more tracked. Do you have any ideas ?

[mikecao]

@laurent-d If you use the wrapper around a link, it doesn't track?

[github-actions[bot]]

This issue is stale because it has been open for 60 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 7 days since being marked as stale.