Reflex Cloud - Fast, secure & scalable hosting. One command to deploy.

Dynamic Routes

Dynamic routes in Reflex allow you to handle varying URL structures, enabling you to create flexible and adaptable web applications. This section covers regular dynamic routes, catch-all routes, and optional catch-all routes, each with detailed examples.

Regular Dynamic Routes

Regular dynamic routes in Reflex allow you to match specific segments in a URL dynamically. A regular dynamic route is defined by sqaure brackets in a route string / url pattern. For example /users/[id] or /products/[category]. These dynamic route arguments can be accesed by as a state var. For the examples above they would be rx.State.id and rx.State.category respectively.

Example:

The [pid] part in the route is a dynamic segment, meaning it can match any value provided in the URL. For instance, /post/5, /post/10, or /post/abc would all match this route.

If a user navigates to /post/5, State.post_id will return 5, and the page will display 5 as the heading. If the URL is /post/xyz, it will display xyz. If the URL is /post/ without any additional parameter, it will display "".

Using

If you are using the app.add_page method to define pages, it is necessary to add the dynamic routes first, especially if they use the same function as a non dynamic route.

For example the code snippet below will:

But if we switch the order of adding the pages, like in the example below, it will not work:

Catch-All Routes

Catch-all routes in Reflex allow you to match any number of segments in a URL dynamically.

Example:

In this case, the ...username catch-all pattern captures any number of segments after /users/, allowing URLs like /users/2/john/ and /users/1/john/doe/ to match the route.

Optional Catch-All Routes

Optional catch-all routes, enclosed in double square brackets ([[...]]). This indicates that the specified segments are optional, and the route can match URLs with or without those segments.

Example:

Optional catch-all routes allow matching URLs with or without specific segments. Each optional catch-all pattern should be independent and not nested within another catch-all pattern.

Catch-all routes must be placed at the end of the URL pattern to ensure proper route matching.

Routes Validation Table

Route PatternExample URlvalid
/users/posts/users/postsvalid
/products/[category]/products/electronicsvalid
/users/[username]/posts/[id]/users/john/posts/5valid
/users/[...username]/posts/users/john/postsinvalid
/users/john/doe/postsinvalid
/users/[...username]/users/john/valid
/users/john/doevalid
/products/[category]/[...subcategories]/products/electronics/laptopsvalid
/products/electronics/laptops/lenovovalid
/products/[category]/[[...subcategories]]/products/electronicsvalid
/products/electronics/laptopsvalid
/products/electronics/laptops/lenovovalid
/products/electronics/laptops/lenovo/thinkpadvalid
/products/[category]/[...subcategories]/[...items]/products/electronics/laptopsinvalid
/products/electronics/laptops/lenovoinvalid
/products/electronics/laptops/lenovo/thinkpadinvalid