npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-router-lazy-retry

v1.0.2

Published

React Router lazy loading retry utility

Downloads

914

Readme

React Router Lazy Retry

A wrapper around React Router routes to add a forced webpage reload when a lazy loaded resource is not found. Supports React Router v6.9.0 and on (when lazy loading was introduced).

Version License npm peer dependency version

⚠️ This requires [email protected] or greater ⚠️

Purpose

React Router now gives the ability to lazy load routes directly in the route definition. A big down side with code-splitting is when dynamic imports do not resolve (like when a chunk hash changes). While React Router does provide an errorElement as a fallback, it would be nice to try and resolve the issue before the user is displayed something.

This package wraps each lazy loading call with a retry wrapper, that if the dynamic import fails, the page is force refreshed to grab the latest JS chunk information. It is based on this gist by Raphaël Léger.

Installation

# Yarn
$ yarn add react-router-lazy-retry

# NPM
$ npm i -s react-router-lazy-retry

Usage

The most common usage is to wrap all routes that contain a lazy function with a retry handler. The code below creates a browser router with the given routes.

import { createLazyRouterWithRetry } from 'react-router-lazy-retry'

const routes = [
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        path: 'a',
        lazy: () => import('./a'),
        children: [{
          path: 'sub-a',
          lazy: () => import('./a/sub')
        }]
      },
      {
        path: 'b',
        lazy: () => import('./b'),
      }
    ]
  }
] 

const router = createLazyRouterWithRetry('browser', routes)

// Replacement for:
// const router = createBrowserRouter(routes)

Supported Routers

Currently only 'browser', 'memory', and 'hash' routers are supported. Static routers are used on server-side which may not make sense to use in this context.

Excluding Routes

If there are any routes that should not be retried if lazy loading fails, add the absolute paths to the exclude array in the create options.

const router = createLazyRouterWithRetry('browser', routes, {
  exclude: ['/a/sub-a']
})

In the example above, the /a/sub-a route will be excluded from lazy retries.

Opt-In Approach (Include)

By default, all routes are included, unless excluded as seen above. But, there is an opt-in approach where all routes that should be retried are specified. To do this, use the include option and add all the absolute paths for retry.

const router = createLazyRouterWithRetry('browser', routes, {
  include: ['/a', '/b']
})

In the example above, the /a and /b routes will be included in lazy retries.

The exclude and include option cannot be used at the same time

Custom Storage Key

When retries are made, a boolean is stored into local storage using the 'retry-{id}-refreshed' key (where {id} is either the absolute route or a configured route ID).

If desired, a custom key can be configured instead of the default:

// Static key
const router = createLazyRouterWithRetry('browser', routes, {
  refreshStorageKey: 'my_static_key'
})

// Dynamic key
const router = createLazyRouterWithRetry('browser', routes, {
  refreshStorageKey: (id) => `dynamic_${id}_key`
})

Router Options

All React Router options are available to be configured through the create options. The options available depend on the type of router chosen (see React Router for more details).

const router = createLazyRouterWithRetry('memory', routes, {
  router: {
    initialEntries: ['/', '/events/123'],
    initialIndex: 1,
  }
})