The Hydrogen framework uses a file-based routing system. This guide provides an introduction to how routing works in your Hydrogen app.

How routes work

All components added to src/pages directory are registered as routes in App.server.jsx. Any filenames with brackets like [handle] are converted to a React Router parameter called :handle.


You have following components in your src/pages directory:

The routes are registered in App.server.jsx and React Router converts [handle] to :handle:

To obtain the handle from React Router, add the following code to App.server.jsx:

Custom static implementation

You can also provide a custom static implementation of a dynamic page to override the default. Any requests to /products/hoodie are rendered using hoodie.server.jsx instead of [handle].server.jsx:

Catch all routes

You can extend dynamic routes to catch all paths by adding an ellipsis (...) inside the brackets. For example, /pages/example/[...handle].server.jsx will match /example/a and /example/a/b.


The following example shows how to obtain catch all routes data using location.pathname:

Next steps