Frontend Garden

React Router 7.5 – загружаем лениво ещё лучше

время чтения ~1 мин.

17.04.2025, Статья с объяснением

В React Router 6.4 появилась возможность определять ленивые маршруты примерно так, как если бы мы использовать React.lazy(). API ленивых маршрутов требовал от нас экспортировать два компонента loader и Component.

С новым Middleware API появится возможность исполнить что-то до момента, когда лоадер и Компонент начнут работу. С предшествующей реализацией ленивой загрузки это привело к проблеме – все лоадеры бы ждали исполнения middlewar’ов, описанных как для своих, так и для других роутов.

В React Router 7.5 представили новый подход к работе с ленивыми роутами - теперь необходимо декларативно писать лоадер и Компонент в роутере, что, по сути, не одна, а две ленивые загрузки. По задумке это позволит лениво загружать отдельные свойства роута, а не загружать их все сразу, а ещё можно это будет разделить на несколько файлов.

const route = {
  lazy: {
    loader: async () => {
      return (await import('./projects/loader')).loader;
    },
    Component: async () => {
      return (await import('./projects/component')).Component;
    },
  },
};

React Router и дальше продолжает выкатывать крутые фичи для Framework-режима, что заставляет в очередной раз задуматься о целесообразности только клиентского (SPA) Data-подхода.

Вид графа