# Page Navigation Course: [Astro](https://www.devtutorials.ai/learn/astro) · Section: Interactivity Source: https://www.devtutorials.ai/learn/astro/interactivity/page-navigation > Full page loads vs client-side navigation, the ClientRouter component, transition:name and transition:animate, transition:persist for islands, scripts and the astro:page-load event, navigate(), data-astro-reload and prefetching strategies. Checkpoint 3. ## Page Navigation - By default, each link click loads a **whole new page**. - The browser throws the old page away and builds the new one. - That is simple and reliable, but the screen flashes and any state is lost. - Astro's **ClientRouter** swaps pages smoothly instead, with animated **view transitions**. - In this lesson, you will turn on the router, animate elements between pages, keep islands alive, and make links load early. **Simple lesson:** ClientRouter swaps pages without a full reload, so navigation feels smooth. ### A Real-World Example - Asha's journal has a header, a post list and post pages. - Every click flashes white, and the music player in her header restarts. - She adds `` to her layout once. - Now the pages slide in, the header stays still, and the player keeps playing. Press **▶ Run**. Click **About** and **Home** a few times. The **Terminal** shows each page being swapped, not reloaded. {title}
`, "src/pages/index.astro": `--- ---

Asha's Dev Journal

Notes about building with Astro.

`, "src/pages/about.astro": `--- ---

About Asha

I write about the web.

`, }} /> What happened: - `` added a small script to every page that uses this layout. - On a link click, the router fetched the new page and **swapped** the content in place. - The browser's **View Transitions** feature animated the change. ### What You Will Learn In this lesson, you will learn: 1. Full page loads vs client-side navigation. 2. How to add ``. 3. How to match elements between pages with `transition:name`. 4. How to choose animations with `transition:animate`. 5. How to keep an element alive with `transition:persist`. 6. How scripts behave with the router, and the `astro:page-load` event. 7. How to navigate from code with `navigate()`. 8. How to prefetch pages before the click. ## Full Loads vs ClientRouter ### What Happens on a Click
Animation: on the left, a full page load blanks the whole screen before the new page appears. On the right, the ClientRouter keeps the header and swaps only the main content. Full page load header (rebuilt) everything rebuilt ClientRouter header (kept) only main swaps
Left: the whole page blinks. Right: only the changed part slides.
- **Full page load** (the default): simple, works everywhere, but flashes and loses state. - **ClientRouter**: smooth, keeps what you ask it to keep, adds a little JavaScript. - If a browser has no View Transitions support, the router still swaps pages, with a simple fallback animation. ### Adding the Router 1. Import it in the frontmatter: `import { ClientRouter } from "astro:transitions";` 2. Put `` inside ``. 3. Put it in your **layout**, so every page has it. - A page **without** the router does a full load when you leave it or arrive at it. - To force a full load for one link, add `data-astro-reload`: ``. In Astro 4 the component was called ``. In Astro 5 and later it is ``. **Simple lesson:** put `` in the layout's `` to turn on smooth navigation. ## Animating Between Pages ### Matching Elements with transition:name - By default, the router fades the old page out and the new page in. - Give an element on two pages the same `transition:name`, and the browser **morphs** one into the other. - Example: the post title in the list grows into the big heading on the post page. ### Choosing an Animation with transition:animate
| Value | Effect | |---|---| | `fade` (default) | Old fades out, new fades in | | `slide` | Old slides out left, new slides in from the right | | `initial` | The browser's own default cross-fade | | `none` | No animation for this element | | `fade({ duration: "0.6s" })` | Fade with your own timing |
Press **▶ Run**. Click a post title. The title morphs into the heading, and the main area slides. Journal
`, "src/pages/index.astro": `--- const posts = [ { slug: "islands", title: "Islands explained" }, { slug: "routing", title: "Routing in Astro" }, ]; ---

All posts

`, "src/pages/posts/[slug].astro": `--- return [ { params: { slug: "islands" }, props: { title: "Islands explained" } }, { params: { slug: "routing" }, props: { title: "Routing in Astro" } }, ]; } const { slug } = Astro.params; const { title } = Astro.props; ---

{title}

The post text goes here.

`, }} /> - Each `transition:name` must be **unique on a page**, so the names include the slug. Astro turns animations off for readers who set "reduce motion" in their system settings (`prefers-reduced-motion`). You do not need extra code for that. **Simple lesson:** `transition:name` links an element across two pages. `transition:animate` picks the effect. ## Keeping Things Alive ### transition:persist - Normally the router replaces everything inside ``. - `transition:persist` tells it: **keep this exact element**, do not replace it. - Use it for an audio player, a video, or an island whose state must survive the trip. - Give it a name when the element is on different pages: `transition:persist="player"`. Press **▶ Run**. Click **+1** three times, then go to **About**. The count stays at 3. Journal
Home · About
`, "src/pages/index.astro": `--- ---

Home

`, "src/pages/about.astro": `--- ---

About

`, }} /> - Remove `transition:persist="counter"` and try again. The count resets on every page. **Simple lesson:** `transition:persist` keeps an element, and its state, across page swaps. ## Scripts and Router Events ### Scripts Run Only Once - With full page loads, a processed ` `, "src/pages/index.astro": `--- ---

Home

`, "src/pages/about.astro": `--- ---

About

`, }} /> - **[JS]** Leave out the `!` after `getElementById(...)`. - To run a whole script again after each swap instead, add `data-astro-rerun` to an `is:inline` script. A click listener added outside `astro:page-load` is attached to the **first** page's button only. After a swap, the new button has no listener, so it silently does nothing. **Simple lesson:** with the router, set up pages inside an `astro:page-load` listener. ## Navigating from Code and Prefetching ### navigate() - Sometimes code must change the page, for example after a select box changes. - `navigate(url)` from `astro:transitions/client` does a router navigation, with animations. ### Prefetching - **Prefetching** loads a page in the background **before** the click, so it opens almost instantly. - With ``, prefetching is on. Without it, set `prefetch: true` in `astro.config.mjs`. - Mark a link with `data-astro-prefetch`. Choose when it loads:
| Strategy | Prefetch when | |---|---| | `hover` (default) | The mouse is over the link, or it gets keyboard focus | | `tap` | Just before the click | | `viewport` | The link scrolls into view | | `load` | The page has loaded |
- `prefetch: { prefetchAll: true }` prefetches every link. `data-astro-prefetch="false"` turns one off. Press **▶ Run**. The **Terminal** shows two links prefetched on load. Move the mouse over **Hover me** to prefetch it. Then pick a page in the select box. Journal `, "src/pages/index.astro": `--- ---

Home

Posts (load)

About (load)

Hover me

`, "src/pages/posts.astro": `--- ---

Posts

Back `, "src/pages/about.astro": `--- ---

About

Back `, "src/pages/contact.astro": `--- ---

Contact

Back `, }} /> - **[JS]** Leave out `as HTMLSelectElement | null`. Prefetch only links people are likely to click. `prefetchAll` on a page with 200 links downloads 200 pages. **Simple lesson:** `navigate()` moves pages from code. Prefetching loads likely pages before the click. ## Checkpoint 3 - You can now build interactive Astro sites: - islands with the right `client:*` directive, - shared state between islands, - smooth navigation with ``, - persistent elements and router events, - prefetching. - Try this: give Asha's journal a persistent "reading list" island in the header that keeps its items as you move between posts. ## TL;DR 1. **Default** = full page load on every click. 2. **ClientRouter** = `` in the layout ``. Pages swap without a full reload. 3. **transition:name** = links an element on two pages, so it morphs. 4. **transition:animate** = `fade`, `slide`, `initial`, `none`, or `fade({ duration })`. 5. **transition:persist** = keep this element (and island state) across swaps. 6. **Scripts** = run once with the router. Put page setup in `astro:page-load`. 7. **navigate(url)** = router navigation from code. 8. **Prefetch** = `data-astro-prefetch` with `hover`, `tap`, `viewport` or `load`. 9. **data-astro-reload** = force a full load for one link. ## Common mistakes
| Mistake | Wrong idea | Correct idea | What goes wrong | |---|---|---|---| | `` on one page only | It works for the whole site | Put it in the shared layout | Some clicks still do full loads | | Setup code outside `astro:page-load` | Scripts run on every page | Processed scripts run once | Buttons stop working after a swap | | The same `transition:name` twice on a page | Names can repeat | Each name is unique per page | The animation breaks | | No `transition:persist` on a player | The router keeps everything | It replaces the body | Music and island state reset | | Using `` | It is the current name | It is `` now | Import error | | `prefetchAll` on huge pages | More prefetching is always faster | Prefetch likely links only | Wasted data |
## Check Yourself ## Exercises ## What to Remember - Astro does full page loads by default. `` in the layout makes them smooth swaps. - `transition:name` morphs matching elements. `transition:animate` picks the effect. - `transition:persist` keeps elements and island state alive. - With the router, scripts run once: use `astro:page-load` for page setup. - `navigate()` moves from code. `data-astro-prefetch` loads pages before the click. Next: **Endpoints and Server Data**, where your site starts to answer requests with data.