Link Component

Overview

The Link component is a thin wrapper around React Router’s Link component, providing a consistent API for navigation throughout the DevJobs application. It uses href prop instead of to for better consistency with standard HTML anchor tags.

Location

/src/components/Link/Link.jsx

Usage

import { Link } from '@/components'

function Navigation() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/search">Search Jobs</Link>
      <Link href="/jobs/123">Job Details</Link>
    </nav>
  )
}

Props

href

string

required

The path to navigate to. Can be an absolute path (starting with /) or a relative path.

<Link href="/search">Search</Link>
<Link href="/jobs/456">View Job</Link>

children

ReactNode

required

The content to display inside the link (text, elements, etc.).

<Link href="/search">
  <span>Find Jobs</span>
</Link>

className

string

CSS class name(s) to apply to the link element.

<Link href="/about" className="nav-link active">
  About
</Link>

...props

any

Any additional props are passed through to the underlying React Router Link component.Supports all React Router Link props including:

state: Pass state to the destination route
replace: Replace current history entry instead of adding
reloadDocument: Skip client-side routing

Implementation

The Link component is a simple wrapper that maps the href prop to React Router’s to prop:

src/components/Link/Link.jsx

import { Link as NavLink } from "react-router-dom"

export const Link = ({ href, children, ...props }) => {
  return (
    <NavLink to={href} {...props}>
      {children}
    </NavLink>
  )
}

Usage Examples

Basic Navigation
With Styling
Dynamic Routes
With State

import { Link } from '@/components'
import styles from './Navigation.module.css'

function Navigation() {
  return (
    <nav>
      <Link href="/search" className={styles.navLink}>
        Search
      </Link>
      <Link href="/about" className={styles.navLink}>
        About
      </Link>
    </nav>
  )
}

import { Link } from '@/components'

function JobCard({ job }) {
  return (
    <article>
      <h3>
        <Link href={`/jobs/${job.id}`}>
          {job.titulo}
        </Link>
      </h3>
      <Link href={`/jobs/${job.id}`} className="details-link">
        Ver detalles
      </Link>
    </article>
  )
}

import { Link } from '@/components'

function SearchResults({ jobs }) {
  return (
    <div>
      {jobs.map(job => (
        <Link 
          key={job.id}
          href={`/jobs/${job.id}`}
          state={{ fromSearch: true }}
        >
          {job.titulo}
        </Link>
      ))}
    </div>
  )
}

Why Use Link Instead of `<a>`?

The Link component provides client-side navigation without full page reloads:

Faster Navigation

Uses React Router’s client-side routing for instant navigation without server round trips.

State Preservation

Preserves React component state across navigation.

History Management

Properly integrates with browser history for back/forward navigation.

Active Link Styling

Can detect active routes for styling current page links.

Real Usage in DevJobs

The Link component is used throughout the application:

In JobCard Component

From src/components/JobCard/JobCard.jsx:24:

<h3>
  <Link className={styles.title} href={`/jobs/${job.id}`}>
    {job.titulo}
  </Link>
</h3>

From src/pages/Detail.jsx:124:

<nav className={styles.breadcrumb}>
  <Link href="/search" className={styles.breadcrumbButton}>
    Empleos
  </Link>
  <span className={styles.breadcrumbSeparator}>/</span>
  <span className={styles.breadcrumbCurrent}>{job.titulo}</span>
</nav>

API Consistency

The href prop provides consistency with standard HTML:

// Standard HTML
<a href="/search">Search</a>

// DevJobs Link component
<Link href="/search">Search</Link>

// React Router native
<Link to="/search">Search</Link>  // Different prop name

This wrapper makes the API more intuitive for developers familiar with HTML while maintaining React Router functionality.

Accessibility

The Link component renders a semantic <a> tag, ensuring:

Keyboard navigation with Tab and Enter
Screen reader compatibility
Right-click “Open in new tab” support
Native browser context menu

Header

Uses Link for main navigation

JobCard

Uses Link for job detail navigation

Routing

Learn about the application’s routing structure

useRouter Hook

Programmatic navigation alternative

The Link component is exported from the main components index (@/components) for convenient importing throughout the application.

Get Started

Architecture

Components

Custom Hooks

Pages

Development

Overview

Location

Usage

Props

Implementation

Usage Examples

Why Use Link Instead of `<a>`?

Faster Navigation

State Preservation

History Management

Active Link Styling

Real Usage in DevJobs

In JobCard Component

API Consistency

Accessibility

Header

JobCard

Routing

useRouter Hook

Build docs developers (and LLMs) love

Get Started

Architecture

Components

Custom Hooks

Pages

Development

​Overview

​Location

​Usage

​Props

​Implementation

​Usage Examples

​Why Use Link Instead of <a>?

Faster Navigation

State Preservation

History Management

Active Link Styling

​Real Usage in DevJobs

​In JobCard Component

​In Detail Page Breadcrumb

​API Consistency

​Accessibility

​Related Components

Header

JobCard

​Related Documentation

Routing

useRouter Hook

Build docs developers (and LLMs) love

Overview

Location

Usage

Props

Implementation

Usage Examples

Why Use Link Instead of `<a>`?

Real Usage in DevJobs

In JobCard Component

In Detail Page Breadcrumb

API Consistency

Accessibility

Related Components

Related Documentation