Skip to main content

useRouteParams

The useRouteParams hook retrieves the parameters of an active route. The hook is available in both server and client components. For example, if your file route has the name [handle].server.jsx, then useRouteParams returns an object with a key handle inside it.

Example code​

[handle].server.jsx
import {useRouteParams} from '@shopify/hydrogen';
// Server component
export default function Page() {
  const {handle} = useRouteParams();
  return <h1>The handle route param is: {handle}</h1>;
}
component.client.jsx
import {useRouteParams} from '@shopify/hydrogen';
// Client component
export default function Component() {
  const {handle} = useRouteParams();
  return <h1>The handle route param is: {handle}</h1>;
}

Return value​

The useRouteParams hook returns an object with key values for each matching route parameter.