Dynamic Routes
Route parameters allow you to create dynamic routes that match patterns instead of exact paths. This is essential for applications with user profiles, product pages, or any content identified by an ID or slug.
Named Parameters
Use :paramName syntax to define named parameters in your routes.
Parameters are accessible in your component via props.
Basic Example
Multiple Parameters
You can have multiple parameters in a single route:
Optional Parameters
Add a ? after the parameter name to make it optional.
Optional parameters can be omitted from the URL.
Wildcard Parameters
Use * to match any path segment or multiple segments.
Wildcards are perfect for file browsers, nested paths, or catch-all routes.
Single Wildcard
Catch-All Route
Use a wildcard-only route as the last route to create a 404 page:
Combining Named Parameters and Wildcards
You can combine named parameters with wildcards for complex routing patterns:
Accessing Parameters
There are multiple ways to access route parameters in your components:
1. Via Component Props (Recommended)
The simplest way - parameters are passed directly to your component:
2. Via routeParams() Function
Use the global routeParams() function for accessing parameters anywhere:
TypeScript Support
Define types for your parameters to get full intellisense:
Practical Examples
E-commerce Product Page
User Dashboard with Tabs
File System Browser
Static Prefix Parameters
You can use static text prefixes before parameters in your route patterns. This is useful when you want to distinguish between different types of IDs or create more semantic URLs.
Basic Prefix Pattern
Multiple Prefixed Parameters
You can combine multiple static prefix parameters in a single route:
Route Ordering with Prefixes
When using static prefix parameters, route order is critical. More specific routes with prefixes must be defined before generic parameter routes:
Performance
Zero Runtime Overhead: Static prefix patterns are parsed and compiled into regular expressions when routes are defined (at initialization time), not on every navigation. This ensures optimal performance with no impact on route matching speed.
Use Cases
Best Practices
Route Order Matters
Routes are matched in the order they are defined. Place more specific routes before general ones:
Parameter Validation
Always validate parameters before using them. Users can type anything in the URL!
Try It Live
Experiment with route parameters in our live examples: