The RouterProvider
component holds the Yarr router context and is responsible for passing it down to underlying components. This component should be used at a level higher than the page components. It takes the router object as props and passes it down.
- Create a router object using a routes object and other options
// routes is an array of objects describing which component
// to load for which url location.
const router = createBrowserRouter({
routes,
awaitComponent: true
});
- Pass the router object into
RouterProvider
as prop.
<RouterProvider router={router}>
<App/>
</RouterProvider>
The Link component allows a user to transition to a different url location within the app.
Once the Link
component is imported from yarr
, it can be used like so.
import { Link } from "yarr";
export const Navbar = () => (
<nav>
<Link to="/">Home</Link>
<Link to="/continents">Continents</Link>
</nav>
);
The Link component additionally handles "intent" preloading. A mouseover on a link will preload code while a mousedown will preload code and data, which makes the overall preloading process a touch faster.
The RouteRenderer
component is responsible for rendering a component matching the path. It uses the routes
array configuration and renders the component which matches the URL.
Example usage is here.