Dynamic RoutesEdit this page
When a path is unknown ahead of time, it can be treated as a flexible parameter that is passed on to the component:
The colon (
:) indicates that
id can be any string.
Once a URL matches the pattern, the
User component will be shown.
When using dynamic segments, the values can be accessed via the
useParams hook within the component.
Routes that share the same path match will be treated as the same route.
If you want to force re-render you can wrap your component in a keyed
Each path parameter can be validated using a
This allows for more complex routing descriptions rather than just checking the presence of a parameter.
matchFilters prop allows for validation of the
withHtmlExtension parameters against the filters defined in
If the validation fails, the route will not match.
So in this example:
/users/aunt/123/contact.htmlwould not match as
:parentis not 'mom' or 'dad',
/users/mom/me/contact.htmlwould not match as
:idis not a number,
/users/dad/123/contactwould not match as
Parameters can be specified as optional by adding a question mark to the end of the parameter name:
:param provides an arbitrary name at that point in the path.
Using an asterisk (
*) will provide a way to match any end of the path:
If the wild part of the path to the component as a parameter needs to be exposed, it can be named:
Note: that the wildcard token must be the last part of the path;
foo/*any/bar will not create any routes.
Routes also support defining multiple paths using an array. This allows a route to remain mounted and not rerender when switching between two or more locations that it matches: