Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Pages

/

Dynamic-routing

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.

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
← RoutesMetadata →

Did you find this useful?