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";

The router provided by exta comes in two types: the URL Router and the Module Router. Since they serve completely different purposes, it’s important to distinguish between them.

The URL Router is, as the name suggests, related to URL handling. You can access the current location through a hook, and you can perform operations such as push and replace. Functions based on this URL Router include useLocation(), usePathname(), useSearchQuery(), and useParams().

In contrast, the Module Router can be considered the core router for managing modules. With the Module Router, you can load page modules or fetch data from a specific page.

#URL 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();

#Module Router

#preload()

Preloads a page module (page component file). Pages that have already been loaded will not be reloaded.

router.preload(router.findPage("/"));

#preloadAllPages()

Loads all JavaScript page components.

#findPage()

Takes a specific URL and retrieves information about the corresponding page (including the component, source file, etc.).

#prefetch()

Fetches the server data for a specific page.

router.prefetch("/");

The server data is the data generated by getStaticProps().