Intermediate
Load data with a route loader
This app uses a data router. Give the recipes/:id route a loader that calls fetchRecipe(params.id) and returns the recipe. If the recipe doesn't exist (the fake API resolves null), throw data("Recipe not found", { status: 404 }).
In Recipe, read the data with useLoaderData() and show its name in <h1 id="recipe">. Add an errorElement to the route that shows <p id="error"> with the error's data text.
In Root, show <p id="pending">Loading...</p> while useNavigation().state is "loading".
What Check tests
- The route has a loader and the page uses
useLoaderData - While the recipe loads,
#pendingis shown - Then the recipe name appears and the pending text goes away
- Another recipe loads too
- A missing recipe shows the error element with
Recipe not found
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.