createRouterComponent function is used to create the component at the root of a Curi + React application. You can call this component anything that you want, but here it will be referred to as the
createRouterComponent is passed the application's Curi router to create a
Router component. The
Router will automatically add an observer to the Curi router when it mounts, so that it can re-render when there are new responses.
Along with setting up an observer to react to new responses, the
Router sets up contexts for routing values. The
navigation can be read using the
useResponse hook, while the
router can be read using the
Router component sets up the application's routing, while its children render the application's content. The Curi router generates
response objects from matched locations; those are core for figuring out what to render.
If you use
route.respond to set React components as the
body properties on your responses, you can create a React element for the
Body element (it is useful to rename the
Body for JSX transformation) is a placeholder for the "real" component that you render for a route. This means that the "real" component will be different for every route.
While not a strict requirement, it is useful to pass the
response object as a prop to the rendered
If your routes use an object to attach multiple components to a response, the
children function also provides a good place to split these apart.
Managing the application's focus when navigating is useful for users who use screen readers. The
useNavigationFocus hookprovides a convenient way to focus a page's main content when it renders a new response.
You can read some more about accessibility in the accessibility guide.
Link component is used to navigate between routes within an application. When it renders in the DOM, it will render as an anchor (
name prop describes which route clicking the link should navigate to. If you pass an invalid route name, Curi will warn you.
If a route has any params (or if any of a route's ancestors have params for nested routes), the
params prop is used to pass these to the
Link also takes
state props to attach their values to the location that will be navigated to.
Please check out the full
@curi/react-dom API documentation to see every component that the package provides.