@curi/route-prefetch

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 functions 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 Curi's once() wrapper 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

argumentdescription
nameThe name of the route to prefetch.
resolveRoute props that are used by the resolve functions.
whichAn array whose values are the names of the resolve functions that should be called. If this array is not provided, all available functions will be called.
Note:

This route interaction will only register routes that have resolve functions. If you try calling this for any routes with neither of those, prefetch() will resolve an object with an error property.


{
  name: "User",
  path: "u/:id",
  resolve: {
    one: () => {...},
    two: () => {...}
  }
}

// call a route's resolve.one() and resolve.two() functions
router.route.prefetch(
  'User',
  { params: { id: 2 }}
)

// only call the route's resolve.one() function
router.route.prefetch(
  'User',
  { params: { id: 3 }},
  ['one']
);