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.