Defining RoutesEdit this page
Routes can be defined directly in an app's template using JSX, but can also be passed to a route configuration directly as an object.
To define routes using JSX, the
Route component is used to define a path and the component to render when the user navigates to that path.
- Add each route to a
Routecomponent. A path as well as an element or component to render must be provided for when the user navigates to the indicated path.
- Provide a root level layout (optional)
A root level layout will always be present and will not update on page change. This is the ideal place for any top level navigation and Context Providers.
- Create a CatchAll Route (404 page)
When pages are not found at any nested level, providing a catchall, or 404 page, provides a fallback option to display to the user.
The asterisk (
*) is used, along with optionally specifying a parameter's name, to access the remaining portion of the path.
- Lazy-load route components
This way, the
Home components will only be loaded when navigating to
JSX is not needed to set up routes.
Routes can be defined as an array of route definitions and passed to the
Additionally, a single route definition object for a single route can be passed: