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.

Example:

class State(rx.State):
    @rx.var
    def post_id(self) -> str:
        return self.router.page.params.get("pid", "no pid")


@rx.page(route="/post/[pid]")
def post():
    """A page that updates based on the route."""
    return rx.heading(State.post_id)


app = rx.App()

In this case, a route like /user/john/posts/5 would display "Posts by john: Post 5".

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

Example:

class State(rx.State):
    @rx.var
    def user_post(self) -> str:
        args = self.router.page.params
        usernames = args.get("username", [])
        return f"Posts by {", ".join(usernames)}"


@rx.page(route="/users/[id]/posts/[...username]")
def post():
    return rx.center(rx.text(State.user_post))


app = rx.App()

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, 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:

class State(rx.State):
    @rx.var
    def user_post(self) -> str:
        args = self.router.page.params
        usernames = args.get("username", [])
        return f"Posts by {", ".join(usernames)}"


@rx.page(route="/users/[id]/posts/[[...username]]")
def post():
    return rx.center(rx.text(State.user_post))


app = rx.App()

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.