Frontender Libs - обзор библиотек JS / CSS

Ленивое обнаружение роутов в React

Метод unstable_patchRoutesOnMiss в React Router позволяет загружать дополнительные роуты динамически, реализуя разделение кода.

Пример использования:

import { createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter(
  [
    {
      id: "root",
      path: "/",
      Component: RootComponent,
    },
  ],
  {
    async unstable_patchRoutesOnMiss({ path, patch }) {
      if (path === "/a") {
        let route = await getARoute();
        patch("root", [route]);
      }
    },
  }
);

async function getARoute() {
  return { path: 'a', Component: A };
}

В этом примере, если пользователь переходит по пути /a, метод unstable_patchRoutesOnMiss загружает роут динамически и добавляет его к роуту root.

👉 @sWebDev

👍3❤1

www.tgoop.com/sWebDev/3028

1.47K viewsJul 22, 2024 at 11:39

Ленивое обнаружение роутов в React

Метод unstable_patchRoutesOnMiss в React Router позволяет загружать дополнительные роуты динамически, реализуя разделение кода.

Пример использования:

import { createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter(
  [
    {
      id: "root",
      path: "/",
      Component: RootComponent,
    },
  ],
  {
    async unstable_patchRoutesOnMiss({ path, patch }) {
      if (path === "/a") {
        let route = await getARoute();
        patch("root", [route]);
      }
    },
  }
);

async function getARoute() {
  return { path: 'a', Component: A };
}

BY Frontender Libs - обзор библиотек JS / CSS