Routing Differences with PWA Kit

PWA Kit uses React Router 5 with programmatic route arrays and manual splitting patterns. Storefront Next uses React Router 7 file-based routing with native nested layouts, typed loaders/actions, and automatic route-level splitting. Migrating generally means converting centralized route configuration into route files and moving route data logic into exports.

AspectPWA KitStorefront Next
Router VersionReact Router 5React Router 7 (framework mode)
Route DefinitionProgrammatic (array in routes.jsx)File-based (files in routes/)
Code SplittingManual via @loadable/componentAutomatic per route file
Data FetchingInside components (hooks)Outside components (loader/clientLoader)
Loading StatesManual isLoading flagsDeclarative via Suspense
Nested LayoutsManual component compositionBuilt-in via <Outlet />
Resource RoutesExpress routes in ssr.jsAction files (action.*.tsx)
Multi-Site URLsconfigureRoutes() expansionTBD / handled differently
Type SafetyJavaScriptTypeScript with typed loaders

PWA Kit:

Storefront Next:

PWA Kit (React Router 5):

Storefront Next (React Router 7):

  1. Dynamic Parameters: Both use :param syntax (PWA Kit in path string, Storefront Next in file name with $).
  2. Catch-All Routes: Both support wildcard routes (* in PWA Kit, $.tsx in Storefront Next).
  3. Programmatic Navigation: Both provide hooks for imperative navigation.
  4. Route Parameter Access: Both provide useParams() hook for accessing URL parameters.
  1. Route File Creation: Each route in routes.jsx becomes a separate file in src/routes/.
  2. Naming Convention: Learn the flat routes naming pattern ($ for params, . for nesting).
  3. Data Fetching: Move data fetching from component hooks to loader/clientLoader exports.
  4. Layout Routes: Use layout routes with <Outlet /> instead of manual nesting.
  5. Resource Routes: Convert Express API routes to action.*.tsx files.
  6. Loading States: Replace isLoading checks with Suspense boundaries via createPage.