Navigating

Using the modules provided by exta, users can experience smoother navigation between pages.

Since exta is a static site generator primarily designed for documentation, blogs, and landing pages, smooth page transitions are considered a top priority. When a user first visits the site, all page components are prefetched for rendering. During navigation, only the corresponding static props are downloaded, ensuring fast and seamless page transitions.

#<Link />

The <Link /> component enables client-side navigation without triggering a full page reload.

When a <Link /> is clicked, the static props for the target page are downloaded and cached.

import { Link } from "exta/components";
 
export default function () {
  return <Link href="/">Go to Home</Link>;
}

#Prefetch

By default, the <Link /> component pre-downloads the static data for the target page. This may lead to issues such as performance degradation and excessive network requests, so you can disable this prefetching if needed.

export default function () {
  return (
    <Link href="/" prefetch={false}>
      Prefetch: false
    </Link>
  );
}

#$exta-router

$exta-router is the core router of exta, provided as a Vite virtual module.

import {
  useLocation,
  useParams,
  useRouter,
  router,
  usePathname,
  useSearchQuery,
} from "$exta-router";

#useLocation() React Only

Returns the current location. This hook can only be used inside React components.

const location = useLocation(); // href
const pathname = usePathname(); // pathname
const query = useSearchQuery(); // searchQuery

#useParams() React Only

Returns the parameters of a dynamic route. It is built on top of useLocation().

const params = useParams();

This hook can also be used inside special files such as _layout.

#useRouter() React Only

Provides router utilities for URL navigation. It is also based on useLocation().

const { location, push, replace } = useRouter();

#router

A core router instance that manages modules and static props.

await router.goto("/");
// Instructs the router to download and cache static props for the "/" page.
// Navigating to external URLs is not allowed.

Unlike useRouter, calling router.goto() does not navigate to the page — it only downloads the associated data. Therefore, when navigating programmatically without <Link />, you should combine both:

await router.goto(href); // prefetch static props
useRouter().push(href); // navigate to the page