✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨
DocsBlogChangelog

Search documentation...

/

Star

12k+

[ Learn ]

[ Concepts ]

[ Reference ]

Pages

Pages specify the component to render for a given URL.

Adding a Page

You can create a page by defining a function that returns a component. By default, the function name will be used as the route, but you can also specify a route.
def index():
    return rx.text("Root Page")


def about():
    return rx.text("About Page")


def custom():
    return rx.text("Custom Route")


app = rx.App()
app.add_page(index)
app.add_page(about)
app.add_page(custom, route="/custom-route")
In this example we create three pages:
  • index - The root route, available at /
  • about - available at /about
  • custom - available at /custom-route

Nested Routes

Pages can also have nested routes.
def nested_page():
    return rx.text("Nested Page")


app = rx.App()
app.add_page(nested_page, route="/nested/page")
This component will be available at /nested/page.

Dynamic Routes

For more complex applications, you may need a dynamic route that changes based on the URL.
You can specify dynamic arguments with square brackets in the route. 
class State(rx.State):
    @rx.var
    def post_id(self):
        return self.get_query_params().get("pid", "no pid")


def post():
    """A page that updates based on the route."""
    return rx.heading(State.post_id)


app = rx.App()
app.add_page(post, route="/post/[pid]")
When you visit /post/123, the page will render with the text 123.
You can specify multiple dynamic arguments. Their values can be retrieved by calling get_query_params().
class State(rx.State):
    @rx.var
    def post_id(self):
        return self.get_query_params().get("pid", "no pid")


def post():
    """A page that updates based on the route."""
    return rx.vstack(
        rx.text(State.post_id),
    )


app = rx.App()
app.add_page(post, route="/post/[pid]")

Page Metadata

You can add page metadata such as:

  • The title to be shown in the browser tab

  • The description as shown in search results

  • The preview image to be shown when the page is shared on social media

  • Any additional metadata

def index():
    return rx.text("A Beautiful App")


def about():
    return rx.text("About Page")


meta = [
    {"name": "theme_color", "content": "#FFFFFF"},
    {"char_set": "UTF-8"},
    {"property": "og:url", "content": "url"},
]

app = rx.App()
app.add_page(
    index,
    title="My Beautiful App",
    description="A beautiful app built with Reflex",
    image="/splash.png",
    meta=meta,
)
app.add_page(about, title="About Page")

Page Load Events

You can also specify a function to run when the page loads. This can be useful for fetching data once vs on every render or state change.
In this example, we fetch data when the page loads:
class State(rx.State):
    data: Dict[str, Any]

    def get_data(self):
        # Fetch data
        self.data = fetch_data()


def index():
    return rx.text("A Beautiful App")


app.add_page(index, on_load=State.get_data)

Page Decorator

You can also use the @rx.page decorator to add a page.
@rx.page(route="/", title="My Beautiful App")
def index():
    return rx.text("A Beautiful App")
This is equivalent to calling app.add_page with the same arguments.
← PropsAssets →

Copyright © 2023 Pynecone, Inc.