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.

Show Technical Details (for Ejected Code)

In the ejected core, the link and global navigation logic are managed by the following modules:

dinou/core/link.jsx: The <Link> component intercepts clicks (preventing default browser reloads) and forwards navigations to the Router via useRouter().push(href, { fresh }). It also binds to onMouseEnter to run window.__DINOU_PREFETCH__(resolvedHref) when hovered.
dinou/core/navigation.js: Implements the client-side context hooks (useRouter, usePathname, and useSearchParams). Note how these hooks share code pathways between server-side SSR execution (falling back to reading request context dynamically) and client-side execution (reading from RouterContext).

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).

Relative Routing Rules

Dinou resolves relative navigation paths (e.g., about, ./about, or ../dashboard) using a File-System Directory Convention. This differs from standard browser URL resolution:

Directory-First Resolution

In a standard web browser, a URL like /blog/hello (lacking a trailing slash) treats hello as a file name. A relative link about resolves by replacing it, yielding /blog/about.

Dinou's Convention: Every route is treated as a directory because physically, pages are folders containing a page.tsx component (e.g. src/blog/hello/page.tsx). Resolving relatively relative to the page mimics navigating the file structure of your project.

Current Path	Relative Target	Resolved Path
/blog/hello	about	/blog/hello/about
/blog/hello	./about	/blog/hello/about
/blog/hello	../about	/blog/about

This rule applies uniformly across all navigation methods, including the <Link> component and programmatic calls like router.push().

Navigation

The <Link> Component

Native Elements

Programmatic Navigation

API Reference

Relative Routing Rules

The `<Link>` Component