Dinou docs

The `<Link>` Component

The <Link> component is the primary way to navigate in Dinou. It extends the standard HTML anchor element to provide client-side soft navigation (SPA transitions) and automatic performance optimizations.

"use client";
import { Link } from "dinou";

export default function NavBar() {
  return (
    <nav className="flex gap-4">
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      
      {/* Opt-in for fresh data */}
      <Link href="/dashboard" fresh>
        Live Dashboard
      </Link>
    </nav>
  );
}

Automatic Prefetching

By default, Dinou prefetches the code and data for the destination route when the user hovers over the link.

The "Fresh" Prop

Passing the fresh prop bypasses the Client Router Cache and forces a fetch of the latest data from the server. Ideal for volatile content.

Native Elements

Standard HTML <a> tags also trigger client-side soft navigation via global event delegation in Dinou, but they lack the smart features (prefetching, fresh prop) provided by the <Link> component.

Programmatic Navigation

To navigate imperatively, use the useRouter hook inside Client Components.

"use client";
import { useRouter } from "dinou";

export default function LoginButton() {
  const router = useRouter();

  const handleLogin = async () => {
    await login();
    router.push("/dashboard");
  };

  return <button onClick={handleLogin}>Log in</button>;
}

API Reference

Method	Description
router.push(href)	Navigates to the provided route. Adds a new entry to the browser's history stack.
router.replace(href)	Navigates to the provided route. Replaces the current entry in the browser's history stack.
router.back()	Navigates back to the previous page in the history.
router.forward()	Navigates forward to the next page in the history.
router.refresh()	Soft Reload: Re-fetches the current route's data from the server and re-renders the page without losing client-side state (like input values or scroll position).

Navigation

The <Link> Component

Native Elements

Programmatic Navigation

API Reference

The `<Link>` Component