Client navigation

Use ordinary links to switch Pages without replacing shared Layouts.

Follow ordinary links

Use an anchor for a registered page:

<a href="/settings">Settings</a>

Keep search inputs and other controls in a shared Layout to retain their state between pages. The Page fades by default in supported browsers, while shared Layouts stay outside the animation.

Turn off a Page's animation

These excerpts use the shared EFFRONT factory from ./effront and registered root Routes from ./routes.

Page definition:

import { Effect } from "effect";
import { EFFRONT } from "./effront";

export const SettingsPage = EFFRONT.Page.make({
  viewTransition: false,
  render: () => Effect.succeed(<h1>Settings</h1>),
});

Register SettingsPage with Routes.page. Settings has no Page animation when you follow a link to its URL.

Turn off animations across the application

Application definition:

import { PageViewTransition } from "@effront/core";
import { Layer } from "effect";
import { EFFRONT } from "./effront";
import { routes } from "./routes";

export default EFFRONT.make({
  routes,
  layer: Layer.succeed(PageViewTransition, { enabled: false }),
});

Pages now change without Page animations unless a Page explicitly enables them. To enable the animation only for Settings, replace the Page definition:

export const SettingsPage = EFFRONT.Page.make({
  viewTransition: { enabled: true },
  render: () => Effect.succeed(<h1>Settings</h1>),
});

In supported browsers, Settings can animate unless reduced motion is enabled. See the PageViewTransition reference for custom animations and other options.

Keep loading UI visible until content arrives

The destination can appear before its content finishes loading. Use Loading or Suspense until the content arrives. For content that can fail during streaming, add a React Error Boundary. See display and stream completion for URL timing and cancellation behavior.

Back, Forward, and reload

Back and Forward can reuse a completed response for that history entry. Reloads and document fallbacks load a new document.