Curi uses an observer pattern to call registered functions (called response handlers) when there is a new response. The primary use care for this is to re-render the application whenever there is a new response, but other functionalities (like logging) can also be performed.
There are three ways to attach response handlers to the router:
router.observe or as a side effect.
Response handlers registered with
router.once will only be called one time, while those registered with
router.observe and side effects will be called for every new response.
When you register a response handler using
router.observe, it will return a function that you can use to stop calling the response handler for new responses. You should rarely need to do this, but it can be useful for memory management if you are adding and removing lots of observers.
What should you use response handlers for?
If any of the routes in an application have
resolve functions, when they match their responses are created asynchronously. When the application first renders, if the router matches an async route, the response isn't immediately ready to use. To deal with this, you can use an observer to render once the initial response is ready.
A setup function only needs to be called one time, so you can register it with
Rendering libraries need to know when there is a new response so that they can re-render the application.
router.observe to re-render new responses.
Side effects are observers that are provided to the router at creation instead of by calling
router.observe. These can be useful for tasks that are not rendering related as well as for tasks that need to be performed after a render has completed.
title function exported by
@curi/router is a side effect that will use
response.meta.title to set the page's
With single-page applications, clicking on links wish hashes won't always scroll to the matching element in the page. The
scroll function exported by
@curi/router is a side effect that scrolls the page to the element that matches the new response's hash (
response.location.hash) after the new response has rendered.
If you need to add logging to your application, you could write your own observer to do this. Your observer can either be added as a side effect when the router is constructed or later using