hydrogen/packages/hydrogen/src/framework/docs/routes.md

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.

Example

You have following components in your src/pages directory:

{% codeblock file, filename: 'src/pages' %}

/pages/index.server.jsx
/pages/custom-page.server.jsx
/pages/products/[handle].server.jsx

{% endcodeblock %}

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

{% codeblock file, filename: 'App.server.jsx' %}

/
/custom-page
/products/:handle

{% endcodeblock %}

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

{% codeblock file, filename: 'App.server.jsx' %}

import {useParams} from 'react-router-dom';

const {handle} = useParams();

{% endcodeblock %}

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:

{% codeblock file, filename: 'src/pages' %}

/pages/products/hoodie.server.jsx
/pages/products/[handle].server.jsx

{% endcodeblock %}

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.

Example

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

{% codeblock file, filename: 'App.server.jsx' %}

import {useLocation} from 'react-router-dom';

const {pathname} = useLocation();

{% endcodeblock %}

Next steps

• Learn about React Server Components, an opinionated data-fetching and rendering workflow for React apps.
• Learn how the page server component receives props, which includes custom versions of request and response.