Proper Usage of the <Link> Component in React Router

A common mistake when using React Router’s <Link> component is providing an incorrect to path, which can lead to broken navigation or unexpected behavior in your application.

The Core Problem

Using <Link> with malformed paths:

<Link to="about">About</Link> {/* ❌ Relative path may break */}
<Link to="/about/">About</Link> {/* ❌ Trailing slash may cause issues */}
<Link to={{ path: 'about' }}>About</Link> {/* ❌ Incorrect object format */}

Correct Usage Patterns

1. Basic Absolute Path

<Link to="/about">About</Link> {/* ✅ Proper absolute path */}

2. Relative Path (v6+)

// When current URL is "/products"
<Link to="featured">Featured</Link> {/* ✅ Links to "/products/featured" */}

3. Path Object (Advanced)

<Link to={{
  pathname: "/products",
  search: "?sort=price",
  hash: "#featured"
}}>
  Products
</Link>

Common Mistakes and Solutions

❌ Missing Leading Slash (Absolute Paths)

<Link to="about">About</Link> {/* ❌ Relative to current URL */}

✅ Fix: Use leading slash for absolute paths

<Link to="/about">About</Link> {/* ✅ Absolute path */}

❌ Incorrect Relative Paths

// Current URL: "/products/123"
<Link to="edit">Edit</Link> {/* ❌ Goes to "/products/123/edit" (may not be intended) */}

✅ Fix: Be explicit about path intentions

<Link to="/products/edit">Edit</Link> {/* ✅ Absolute */}
// or
<Link to="../edit">Edit</Link> {/* ✅ Relative parent */}

❌ Trailing Slashes

<Link to="/about/">About</Link> {/* ❌ May cause matching issues */}

✅ Fix: Omit trailing slash

<Link to="/about">About</Link> {/* ✅ Clean path */}

❌ Incorrect Object Format

<Link to={{ route: "/about" }}>About</Link> {/* ❌ Wrong property */}

✅ Fix: Use correct object properties

<Link to={{ pathname: "/about" }}>About</Link> {/* ✅ Correct */}

Advanced Usage

1. Dynamic Paths

<Link to={`/users/${userId}`}>User Profile</Link>

2. Preserving Query Parameters

<Link 
  to={{
    pathname: "/settings",
    search: location.search // Preserves current query string
  }}
>
  Settings
</Link>

3. State Passing

<Link 
  to="/dashboard"
  state={{ from: location.pathname }}
>
  Dashboard
</Link>

Debugging Tips

1. Check the rendered HTML: The <Link> renders as an <a> tag – inspect its href attribute
2. Verify route definitions: Ensure your <Route> paths match your <Link> paths
3. Use TypeScript: Catch path errors at compile time
4. Test navigation: Manually visit the generated URLs to verify routing works

React Router v6 Specifics

Relative Links

In v6, links are relative to their parent route by default:

// In a component rendered at "/products"
<Link to="featured">Featured</Link> {/* Links to "/products/featured" */}

Absolute Paths from Anywhere

<Link to="/products/featured">Featured</Link> {/* Absolute from any location */}

TypeScript Support

For type-safe paths:

// Define your route paths
type AppRoutes = "/" | "/about" | "/products" | `/products/${string}`;

// Typed Link component
const AppLink = ({ to, ...props }: { to: AppRoutes } & React.ComponentProps<typeof Link>) => (
  <Link to={to} {...props} />
);

// Usage
<AppLink to="/about">About</AppLink> {/* ✅ */}
<AppLink to="/invalid">Invalid</AppLink> {/* ❌ Type error */}

Key Takeaways

1. Absolute paths should start with /
2. Relative paths are resolved against current URL in v6
3. Avoid trailing slashes unless specifically needed
4. Use path objects for complex navigation needs
5. Test your links to ensure they match your route definitions

Proper usage of <Link> ensures reliable navigation and better user experience in your React Router application. Always verify your paths match your route configuration and consider using TypeScript for additional safety.