Next.js triggers the onClick event before routing to the href link

Question

Next.js triggers the onClick event before routing to the href link

Scenario

In my current setup with Next.js 13, I am utilizing Apollo Client to manage some client side variables.

Objective

I aim to trigger the onClick function before navigating to the href location.

The Code I'm Using

<Link
      href={`/session/${session.id}`}
      onClick={() => {            
        updateDialogVars({
          dialogOpen: ATTENDANCE_DIALOG,
        })
      }}
    >
    <div>
      stuff
    </div>
</Link>

The updateDialogVars method is a mutation that updates reactive vars in Apollo Client.

Inquiry

Is it feasible to leverage the Next.js Link component to execute the onClick event prior to routing to the href? Or should I convert the Link to a div and employ Next Router to push the route change after executing the onClick function?

javascript next.js apollo-client

Answer 1

Answer №1

In order to achieve this functionality, it is recommended to use a button along with a router hook, instead of an anchor tag (link).

import { useRouter } from "next/router"; // if you use pages dir
import { useRouter } from "next/navigation"; // if you use app dir

const SomeComponent = () => {
 const router = useRouter();

 const onClick = async () => {
  updateDialogVars(...yourConfig);
  if(someCondition) {
   await router.push(`/session/${session.id}`);
  }
 }

 return (
  <button onClick={onClick}>Label</button>
 )
}

A similar outcome can also be achieved using next/link.

import { useRouter } from "next/router"; // if you use pages dir
import { useRouter } from "next/navigation"; // if you use app dir
import Link from "next/link";

const SomeComponent = () => {
 const router = useRouter();

 const onClick = async (event) => {
  event.preventDefault();
  updateDialogVars(...yourConfig);
  if(someCondition) {
   await router.push(event.target.href);
  }
 }

 return (
  <Link href={`/session/${session.id}`} onClick={onClick}>Label</Link>
 )
}

Answer 2

In order to achieve this functionality, it is recommended to use a button along with a router hook, instead of an anchor tag (link).

import { useRouter } from "next/router"; // if you use pages dir
import { useRouter } from "next/navigation"; // if you use app dir

const SomeComponent = () => {
 const router = useRouter();

 const onClick = async () => {
  updateDialogVars(...yourConfig);
  if(someCondition) {
   await router.push(`/session/${session.id}`);
  }
 }

 return (
  <button onClick={onClick}>Label</button>
 )
}

A similar outcome can also be achieved using next/link.

import { useRouter } from "next/router"; // if you use pages dir
import { useRouter } from "next/navigation"; // if you use app dir
import Link from "next/link";

const SomeComponent = () => {
 const router = useRouter();

 const onClick = async (event) => {
  event.preventDefault();
  updateDialogVars(...yourConfig);
  if(someCondition) {
   await router.push(event.target.href);
  }
 }

 return (
  <Link href={`/session/${session.id}`} onClick={onClick}>Label</Link>
 )
}

Next.js triggers the onClick event before routing to the href link

Answer №1

Similar questions

Validation using Joi allows for a field to be optional, but if it is included, it must be a positive integer

Tips for obtaining the dynamically loaded HTML content of a webpage

Can CSS actually generate accurate inches?

The issue with sentry's captureException is that it only displays part of the

Utilizing HIGHCHARTS to effectively access PHP variables from a separate PHP file through Jquery/Ajax

Combine loop results into a string using jQuery

Tips for adjusting a pre-filled form?

Executing npm scripts in Node.js

Sorting through items based on several URL parameters

Unable to dynamically attach a class in Vue.js

creating a countdown timer for the carousel

Guide on configuring Angular validation to trigger on blur events and form submission

The JSX syntax was not properly parsed by Jest despite correct configuration settings

Utilizing environmental variables with cPanel in Node.js

Unable to execute specific php function using ajax

Error: JSON at position 1 is throwing off the syntax in EXPRESS due to an unexpected token "

Expired Azure app registration client secret leads to CORS error when accessing API

Angular date selection with a range of plus two days, factoring in the exclusion of weekends

Show a loading progress indicator with a percentage until Next/React completes loading

Alternate Row Colors Using Odd/Even CSS Styling for Main Headings