From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Preventing default behaviour

Preventing default behaviour

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

Preventing default behaviour

“

In this session, you'll learn how to prevent default browser behaviors in React, such as unwanted page navigation when a link is clicked or a form is submitted. Let's start with our simple React template. Now I am adding the basic structure for our link and form examples within the app component. You'll notice that I've added a div to contain them both, but they are currently empty placeholders. Now it is time to add a link element. I've added an a tag with an href attribute pointing to https://example.com and the text link within the anchor tag. This creates a clickable link that will navigate to that URL. This is the behavior we will learn to control. Let's go back to our code. To prevent the default link behavior, I've introduced a handleLinkClick function. This function takes an event object as an argument. Inside, event.preventDefault stops the default link navigation action. I also added a console.log statement to show you it's working. You'll see Link Click Prevented in your…

Contents