Skip to main content

Router

The Router component provides the context for routing in your Hydrogen storefront.

Example code​

App.server.jsx
import {Router, FileRoutes, Route} from '@shopify/hydrogen';
function App() {
  return (
    <Suspense fallback={<LoadingFallback />}>
      <ShopifyProvider>
        <CartProvider>
          <Router>
            <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
childrenArray&#60;ReactElement&#62; &#124; ReactElementAny React elements.

Component type​

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

Considerations​

  • You should only have one Router component in your app.
  • All FileRoutes and Route components must be children of Router.