When to Avoid Link Component in React

The Link component, provided by routing libraries like React Router and Next.js, is the standard tool for client-side navigation in React applications. However, using it for every clickable element can lead to poor performance, broken navigation, and accessibility issues. This article explains the specific scenarios where you should avoid using the React Link component and what you should use instead to ensure a seamless user experience.

1. Navigating to External Websites

The primary purpose of the React Link component is to handle client-side routing within your single-page application (SPA) without reloading the page. It intercepts the browser’s default behavior to transition between internal routes.

If you are directing users to an external website (e.g., linking to a third-party service or social media page), the internal router cannot handle this transition.

• What to use instead: Use a standard HTML anchor (<a>) tag.

// Avoid
<Link to="https://google.com">Google</Link>

// Use instead
<a href="https://google.com" target="_blank" rel="noopener noreferrer">Google</a>

2. Triggering Actions and JavaScript Functions

Using a Link component to trigger a JavaScript action—such as opening a modal, toggling a dropdown, submitting a form, or changing a theme—violates semantic HTML and web accessibility standards (ARIA).

Screen readers announce links as elements that take the user to a new location. If clicking the link only executes code on the current page without changing the URL, it confuses assistive technologies.

• What to use instead: Use a <button> element. You can style the button to look like a link using CSS if necessary.

// Avoid
<Link to="#" onClick={openModal}>Open Modal</Link>

// Use instead
<button onClick={openModal}>Open Modal</button>

3. Programmatic Navigation After an Event

If you need to redirect a user after a specific event occurs—such as a successful form submission, an API call, or authentication—wrapping elements in a Link component is impractical. You cannot guarantee the user will click the link, and you often need to run validation logic before the redirect happens.

• What to use instead: Use programmatic navigation hooks provided by your routing library, such as useNavigate in React Router or useRouter in Next.js.

// Example using React Router useNavigate
import { useNavigate } from 'react-router-dom';

function SignupForm() {
  const navigate = useNavigate();

  const handleSubmit = async (event) => {
    event.preventDefault();
    await registerUser();
    navigate('/dashboard'); // Programmatic redirection
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

4. Downloading Files

When you want a user to click a link to download a file (like a PDF, CSV, or ZIP file), the client-side router should not attempt to resolve this as a route change. Using a React Link can cause the router to look for a page component matching the file path, resulting in a 404 error or an empty page.

• What to use instead: Use a standard HTML <a> tag with the download attribute.

// Avoid
<Link to="/assets/report.pdf">Download Report</Link>

// Use instead
<a href="/assets/report.pdf" download>Download Report</a>

5. Linking to Page Anchors on the Same Page

If you want to create a skip-to-content link or allow users to jump to a specific section on the same page (e.g., #features), using a client-side Link can sometimes interfere with the scroll behavior or cause unnecessary route re-renders depending on your router configuration.

• What to use instead: Use a standard anchor tag for straightforward in-page anchor links.

// Avoid
<Link to="#features">Go to Features</Link>

// Use instead
<a href="#features">Go to Features</a>