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_live.ex

defmodule MyAppWeb.LinkLive do
  use MyAppWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok, socket}
  end

  def render(assigns) do
    ~H"""
    <.react name="Link" socket={@socket} />
    """
  end
end

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.