HomeChallengesRepsProblemsLeaderboardTake a challenge

Routes and guards, the React way

Two feature areas that should not be in the first bundle, behind a guard that remembers where you were going, with a loader that fetches before the component renders and something sensible for a path nobody defined.

Intermediate25 min on the clock6 graded checks · 100 pointsRouting and State, the React Way

See alsoRoutes and GuardsThe same problems in Angular — lazy loading, a guard, a redirect that remembers, a resolver.

Graded by reading your code against the checklist below.

What you build

  • Each feature area loaded lazily, behind Suspense
  • A guard component that renders an Outlet when allowed
  • A redirect that carries the intended URL
  • A loader that fetches before the route renders
  • A catch-all route for an unknown path
  • An errorElement so a thrown response is not a blank page

Done means

The first bundle contains neither feature, an unauthenticated visit remembers its destination, and no route can render a blank screen.

How it is graded

Published in full, before you start — every point is one of these and there is nothing else.

  1. Feature areas are split out of the first bundle+25React performance
  2. One guard wraps the routes it protects+25Roles and policies
  3. The redirect carries where they were going+15Roles and policies
  4. Data is resolved before the route renders+15Loading and error states
  5. An unknown path lands somewhere+10Error handling
  6. A thrown response renders something+10Error handling

What it teaches

The rest of Routing and State, the React Way