@curi/route-prefetch

GitHub logoGitHub RepoNPM logoNPM Package

Installation

The package can be installed through npm (you need to have Node & NPM installed).

npm install @curi/route-prefetch

Prefer inline scripts? A full (.umd.js) and minified (.min.js) script is available for every version through Unpkg. You can access the package's exports through window.CuriRoutePrefetch.

About

The prefetch route interaction can be used fetch data for a route prior to navigating. The interaction will call a route's resolve functions (if they exist on the route).

Prefetching data means results in faster renders after navigation because you don't have to wait for the data to load.

Note:

Prefetching resolve function calls is only beneficial if you cache the results because the function will be re-called when the user navigates to that route. Functions wrapped by the once() wrapper (from @curi/helpers) will automatically re-use the results from their first call.

API

prefetch()

A function to create the prefetch route interaction. When you create your router, the result is passed to the router using the `route` option, which will add a prefetch() function to the router's route interactions.

import { curi } from '@curi/router';
import prefetch from '@curi/route-prefetch';

const router = curi(history, routes, {
  route: [prefetch()]
});

router.route.prefetch("Some Route");

Arguments

name

The name of the route to prefetch.

optional

A route's resolve function is called with two arguments: the match object for the matched route and an externalvalue. You can provide filler values for these with the optional object argument.

const router = curi(history, routes, {
  external
});

router.route.prefetch("Some Route", {
  match: { params: {...} },
  external: router.external
});
match

An object of "match" properties for the resolve function. The possible properties are name, params, location, and partials.

external

Any external values passed to the resolve function.

To access the external values set on the router when it was created, you can use router.external.

const router = curi(history, routes, {
  external: {...}
});

router.route.prefetch(
  "Some Route",
  { external: router.external }
);
Note:

This route interaction will only register routes that have a resolve function. If you try calling this for any routes without a resolve function, prefetch() will resolve an object with an error property and a null resolved property.