Pages

Pages map components to different URLs in your app. This section covers creating pages, handling URL arguments, accessing query parameters, managing page metadata, and handling page load events.

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.

In this example we create three pages:

• index - The root route, available at /
• about - available at /about
• custom - available at /custom-route

You can also use the @rx.page decorator to add a page.

This is equivalent to calling app.add_page with the same arguments.

Links are accessible elements used primarily for navigation. Use the href prop to specify the location for the link to navigate to.

You can also provide local links to other pages in your project without writing the full url.

To open the link in a new tab, set the is_external prop to True.

Check out the link docs to learn more.

Redirect the user to a new path within the application using rx.redirect().

• path: The destination path or URL to which the user should be redirected.
• external: If set to True, the redirection will open in a new tab. Defaults to False.

Redirect can also be run from an event handler in State, meaning logic can be added behind it. It is necessary to return the rx.redirect().

Pages can also have nested routes.

This component will be available at /nested/page.

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

You can access the current page from the router attribute in any state. See the router docs for all available attributes.

The router.route_id attribute allows you to obtain the route pattern matched for the current page, for dynamic pages this will contain the slug rather than the actual value used to load the page.

To get the actual URL path displayed in the browser, use router.url.path. For query parameters and the URL fragment, use router.url.query_parameters and router.url.fragment respectively.

In the above example, current_page_route will contain the route pattern (e.g., /posts/[id]), while current_page_url will contain the actual URL path (e.g., /posts/123).

To get the full URL (scheme, host, path, query and fragment), use router.url directly — it is a string subclass containing the complete URL.

Example:

In this example, running on localhost should display http://localhost:3000/posts/123/