Skip to main content

FileRoutes

The FileRoutes component builds a set of Hydrogen routes. By default, it loads the routes specified in the Hydrogen configuration file when no props are passed.

You can override the default behavior and use custom routes based on the output that's provided by Vite's import.meta.globEager method. You can have multiple instances of the FileRoutes component to source file routes from multiple locations.

Example code​

App.server.jsx
import {Router, FileRoutes, Route} from '@shopify/hydrogen';

function App() {
  const esRoutes = import.meta.globEager('./custom-routes/es/**/*.server.jsx');
  const enRoutes = import.meta.globEager('./custom-routes/en/**/*.server.jsx');

  return (
    <Suspense fallback={<LoadingFallback />}>
      <ShopifyProvider>
        <CartProvider>
          <Router>
            <FileRoutes />
            <FileRoutes basePath="/es/" routes={esRoutes} />
            <FileRoutes basePath="/en/" routes={enRoutes} />
            <Route path="*" page={<NotFound />} />
          </Router>
        </CartProvider>
      </ShopifyProvider>
    </Suspense>
  );
}
function NotFound() {
  return <h1>Not found</h1>;
}

Props​

NameTypeDescription
routes?ImportGlobEagerOutputThe routes defined by Vite's import.meta.globEager method.
basePath?stringA path that's prepended to all file routes. You can modify basePath if you want to prefix all file routes. For example, you can prefix all file routes with a locale.
dirPrefix?string &#124; RegExpThe portion of the file route path that shouldn't be a part of the URL. You need to modify this if you want to import your routes from a location other than the default src/routes.

Component type​

The FileRoutes component is a server component that renders inside App.server.jsx. For more information about component types, refer to React Server Components.