-
- 1-react-router-introduction
- 2-nested-routes
- 3-search-params
- 4-loaders-and-errors
- 5-actions-and-protected-routes
- 6-added-firestore
Build rental van travel app using React Router 6 that is a part of Scrimba's React Router 6 course. I learned fundamentals and new features of react-router via this app. You can see each step creating this app below.
BrowserRouter, Routes, Route, Link and useParams() are used to bootstrap of VanLife app at this section.
Host and Vans pages and its nested routes added at this section.
- When user opens Vans page, they can see listed vans.
- User can clicks any van detail.
- User can see van details, pricing and photos on related tabs.
Simple, Luxury and Rugged filters added on the Vans Listing page
- When user opens Vans page, they can see listed vans.
- User can filter van type accordig to Simple, Luxury or Rugged.
Vans page are improved adding useLoaderData() and useRouteError() hooks.
- When user opens Vans listing page, all vans are listed with useLoaderData() not using state and useEffect().
- If there is an error fetching to vans data, error page is thrown in detail.
Log in form and protected routes added via loaders, actions, useLoaderData(), useActionData(), useNavigation() and React Router Form component.
- When user opens Host page, they must log in.
- If they log in, they can see Dashboard, Vans, Income and Reviews pages.
Real firestore added usign Firebase.
- Vans collections added an listed on the Vans page
- You can check out [this live website:] (https://fe-vans-app.netlify.app/)