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
Index is a special exception where it is available at both / and /index. All other pages are only available at their specified route.
You can access the current page from the router attribute in any state. See the router docs for all available attributes.
The router.page.path attribute allows you to obtain the path of the current page from the router data,
for dynamic pages this will contain the slug rather than the actual value used to load the page.
To get the actual URL displayed in the browser, use router.page.raw_path. This
will contain all query parameters and dynamic path segments.
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 (e.g., /posts/123).
To get the full URL, access the same attributes with full_ prefix.
Example:
In this example, running on localhost should display http://localhost:3000/posts/123/