Practice & Assessment
Test your understanding of React Router and Navigation
Multiple Choice Questions
5What is the purpose of the `<Outlet />` component in React Router v6?
How do you read a URL parameter like `/users/:userId` in a component?
What does `<Navigate replace />` do differently than `<Navigate />` alone?
What must wrap a React.lazy() imported component to handle loading states?
What is the key advantage of using React Router's loader function over useEffect for data fetching?
Coding Challenges
1Blog with Nested Routes
Build a blog app with React Router v6. Routes: / (home, list of 5 hardcoded posts), /posts/:postId (single post detail, use useParams to display the matched post), /about (static page), * (404 not found page). Create a persistent Navbar with NavLink components. The post list page should link each post to its detail page. Implement a ProtectedRoute that blocks /admin route and redirects to /login. Use useNavigate on the login page to redirect back after 'logging in' (simulate with a button). Estimated time: 30 minutes.
Mini Project
E-commerce Product Browser SPA
Build a multi-page product browser. Routes: / (grid of products fetched from https://fakestoreapi.com/products), /products/:id (product detail with image, price, and description), /cart (protected route showing cart items), /login (login simulation). Implement: lazy loading for all route components with Suspense, a CartContext tracking added items, protected /cart route redirecting to /login with state, NavLink active styling, and 404 catch-all. Persist cart to localStorage using a custom hook.