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 in Reflex allow you to match specific segments in a URL dynamically. A regular dynamic route is defined by square brackets in a route string / url pattern. For example /users/[id] or /products/[category]. These dynamic route arguments can be accessed through 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 "".

Adding dynamic routes uses the add_page method like any other page. The only difference is that the route string contains dynamic segments enclosed in square brackets.

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 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/posts/john/ and /users/1/posts/john/doe/ to match the route.

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.