Link

A navigation component that provides client-side routing capabilities for internal links and external link handling.

Import

Code
 
import { Link } from "zudoku/components";

Usage

Basic Internal Link

Code
 
<Link to="/docs/getting-started">Get Started</Link>

Link with State

Code
 
<Link to="/profile" state={{ from: "header" }}>
  Profile
</Link>

Replace History Entry

Code
 
<Link to="/login" replace>
  Login
</Link>

External Link Behavior

Code
 
<Link to="/docs" reloadDocument>
  Full Page Reload
</Link>

Examples

Navigation Menu

Code
 
function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/docs">Documentation</Link>
      <Link to="/api">API Reference</Link>
      <Link to="/blog">Blog</Link>
    </nav>
  );
}

Breadcrumb Navigation

Code
 
function Breadcrumbs({ path }) {
  return (
    <div className="breadcrumbs">
      <Link to="/">Home</Link>
      <span>/</span>
      <Link to="/docs">Docs</Link>
      <span>/</span>
      <span>{path}</span>
    </div>
  );
}

Dynamic Links

Code
 
function DocsList({ docs }) {
  return (
    <ul>
      {docs.map((doc) => (
        <li key={doc.id}>
          <Link to={`/docs/${doc.slug}`}>{doc.title}</Link>
        </li>
      ))}
    </ul>
  );
}

Conditional Linking

Code
 
function ConditionalLink({ to, disabled, children }) {
  if (disabled) {
    return <span className="disabled-link">{children}</span>;
  }

  return <Link to={to}>{children}</Link>;
}

Link Types

Relative Links

Code
 
// Relative to current route
<Link to="../parent-page">Up one level</Link>

// Relative to path
<Link to="./sibling-page" relative="path">
  Sibling page
</Link>

Absolute Links

Code
 
<Link to="/absolute/path">Absolute Path</Link>

Query Parameters

Code
 
<Link to="/search?q=react&type=docs">Search Results</Link>

Hash Links

Code
 
<Link to="/docs/api#authentication">Authentication Section</Link>

Advanced Usage

With Custom Styling

Code
 
<Link to="/important-page" className="text-blue-600 hover:text-blue-800 underline">
  Important Page
</Link>

Programmatic Navigation

Code
 
import { useNavigate } from "react-router";

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

  const handleClick = () => {
    // Perform some logic
    navigate("/next-page");
  };

  return (
    <div>
      <Link to="/direct-link">Direct Link</Link>
      <button onClick={handleClick}>Programmatic Navigation</button>
    </div>
  );
}

Link with Confirmation

Code
 
function DeleteLink({ itemId }) {
  const handleClick = (e) => {
    if (!confirm("Are you sure you want to delete this item?")) {
      e.preventDefault();
    }
  };

  return (
    <Link to={`/items/${itemId}/delete`} onClick={handleClick} className="text-red-600">
      Delete Item
    </Link>
  );
}

Integration with Button

Use the Link component with the Button component's asChild prop:

Code
 
<Button asChild variant="outline">
  <Link to="/action">Perform Action</Link>
</Button>

Accessibility

The Link component maintains accessibility best practices:

• Proper focus management
• Keyboard navigation support
• Screen reader compatibility
• Semantic HTML structure

Code
 
<Link to="/help" aria-label="Get help and support">
  Help
</Link>

Performance

• Client-side routing: No full page reloads for internal navigation
• Prefetching: Intelligent prefetching of linked resources
• View transitions: Smooth transitions between pages (when supported)

Notes