Navigation

Link

The Link component for href, patch and navigate

Link
patch
navigate

Key concepts

Link is a drop-in replacement for a plain <a> that understands the same three navigation modes as HEEx's own <.link>: href, patch and navigate. It renders an ordinary anchor and lets Phoenix's own client-side JavaScript take over the click.

Link.jsx

import React from "react";
import { Link } from "live_react";

// Real JSX usage of `Link`, the drop-in `<a>` replacement exported by
// `live_react`. `href` is a plain anchor — a full browser navigation, no
// LiveView involved at all — while `navigate` changes the URL and mounts a
// new root LiveView over the existing socket, with no full page reload.
//
// Named `LinkExample`, not `Link`: this file already imports the real
// `Link` from `live_react` above, so exporting a component under the same
// name would shadow it.
export function LinkExample() {
  return (
    <div className="flex gap-3">
      <Link href="/examples/counter" className="rounded-md border px-3 py-1">
        href — full page reload
      </Link>
      <Link navigate="/examples/context" className="rounded-md border px-3 py-1">
        navigate — same process, no reload
      </Link>
    </div>
  );
}

How it works

The first link uses href — a traditional anchor, a full browser navigation, no different from clicking a link on a page with no LiveView on it at all. The second uses navigate — the browser's URL changes, but the click is intercepted and handled entirely over the existing socket, mounting a new root LiveView with no full page reload.

patch (not shown here, since it only makes sense for the LiveView that owns the current route — see the Patch vs Navigate example) works the same way but calls handle_params/3 on the current LiveView instead of mounting a new one.