# How to Use preventDefault in React to Stop Link Navigation and Page Refresh
> Learn how to use preventDefault in React to stop link navigation and page refresh. Call event.preventDefault() in your onClick handler for smooth user experiences.
- Repository: [Meta/react](https://github.com/facebook/react)
- Tags: how-to-guide
- Published: 2026-02-16
---
**Call `event.preventDefault()` inside your `onClick` handler to stop a link's default browser navigation while preserving the `href` attribute for accessibility and SEO.**
React's **SyntheticEvent** system normalizes browser events across environments, providing a consistent `preventDefault()` method identical to the native DOM API. When building single-page applications with the facebook/react repository, preventing default link behavior is essential for client-side routing without full page refreshes.
## Understanding preventDefault in React's SyntheticEvent System
React implements event normalization in [`packages/react-dom-bindings/src/events/SyntheticEvent.js`](https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/events/SyntheticEvent.js), where the `preventDefault()` method sets an internal `defaultPrevented` flag and forwards the call to the underlying native event when available. This architecture ensures cross-browser consistency while maintaining the standard DOM API that developers expect.
The test suite in [`packages/react-dom/src/events/__tests__/SyntheticEvent-test.js`](https://github.com/facebook/react/blob/main/packages/react-dom/src/events/__tests__/SyntheticEvent-test.js) verifies that calling `preventDefault()` correctly marks the event as canceled, which React's event system respects during the bubbling phase.
## The Correct Pattern for preventDefault in React Links
To prevent a link from causing a full-page refresh while maintaining accessibility and SEO benefits, follow this three-step pattern:
1. **Attach an `onClick` handler** to the `` element.
2. **Call `event.preventDefault()`** on the synthetic event passed to the handler.
3. **Execute client-side navigation** using your routing solution or state updates.
```jsx
function SmoothLink() {
const handleClick = (e) => {
e.preventDefault(); // Stops the browser's default navigation
console.log('Navigation prevented, executing custom logic');
};
return (
Click without refreshing
);
}
```
## Practical Implementations of preventDefault in React
### Basic Link That Stays on Page
For links that trigger actions rather than navigation, prevent the default behavior and handle the interaction programmatically:
```jsx
function StayOnPageLink() {
const handleClick = (e) => {
e.preventDefault(); // Stops page reload
console.log('Link clicked, but no navigation');
};
return (
Click me – stay on page
);
}
```
### Client-Side Navigation with React Router
When using React Router v6, combine `preventDefault` with the `useNavigate` hook to enable smooth SPA transitions without losing the `href` attribute for accessibility:
```jsx
import { useNavigate } from 'react-router-dom';
function NavLink() {
const navigate = useNavigate();
const onClick = (e) => {
e.preventDefault(); // Cancel native navigation
navigate('/dashboard'); // Smooth client-side transition
};
return (
Dashboard
);
}
```
### Preventing Form Submission via Link
Links inside forms can inadvertently trigger submissions. Use `preventDefault` to handle the interaction without submitting the form, as demonstrated in [`packages/react-dom/src/__tests__/ReactDOMForm-test.js`](https://github.com/facebook/react/blob/main/packages/react-dom/src/__tests__/ReactDOMForm-test.js):
```jsx
function FormWithLink() {
const onLinkClick = (e) => {
e.preventDefault(); // Stop form submission
// Custom handling logic here
};
return (
);
}
```
### Using Buttons Instead of Links
When no actual navigation occurs, a `