Give your React app real URLs: routes, links, params, nested layouts, and protected pages.
One screen is not an app. You can already build components, manage their state, compose them into a kit, and describe every shape that crosses a file. What none of that can do is answer the first question anyone asks of a real product: what happens when someone sends a colleague a link to Ada's page. This course is the answer, and it is shorter than you expect, because a router is one idea applied consistently.
You start with what a router actually does, which is match a URL against a list and render whichever component wins. Then links that move without reloading, dynamic segments that put a record id in the address bar, and nested routes, which arrive early and on purpose: a flat list of routes is the specific mistake nesting exists to prevent, and every day spent writing one is a habit to unlearn. From there it is index routes, lazy pages, navigating from your own code, and filters that live in the query string instead of in state a reload throws away.
The last sections are the ones that separate a demo from a product. You handle URLs nobody planned for, guard a route and send people back where they came from afterwards, and finish by converting the whole app to a data router with loaders. You do all of it on Crew, the board you have carried through four courses, which ends this one as Crew Pages: a persistent shell, a page per member, filters a link can carry, a real not-found page, and an admin area only some people reach.
47 Lessons • 51 Practices • 18 Quizzes • 4 Projects · ~10h Total
Not just theory. You finish this course with real work to show.
This is the same in-browser editor every lesson uses. Edit the code, hit Run.
Run code in the browser and see the result immediately. Every lesson works this way.
Stuck? Puff explains the error and nudges you forward, without giving the answer away.
Streaks, diamonds, and certificates. Your progress saves automatically, forever.
Every completed course issues a certificate with a public verification link.
Every certificate has a public verification link employers can check.
One certificate per course. Finish a program and earn its program certificate too.
LinkedIn-ready, with a PDF you can download and attach.
You can build the components. What you cannot do yet is give any of them an address, and every feature you add makes that hurt more.
You have written a `page` state variable and shipped it. This course shows you what the browser was offering the whole time.
It worked, you moved on, and nesting still looks like magic. Here you get the model underneath, in the order that makes it obvious.
React Router is free to start, no credit card needed. Some later sections are part of Pro, and finishing every section, including the certificate, needs a Pro plan.
Yes, or the equivalent. React Router on Devpuff is written in TypeScript throughout and assumes you can already build components, manage state, and read a type annotation. It teaches no React and no TypeScript of its own.
Because the checker reads your app's first render and cannot click anything. Every exercise mounts React Router's MemoryRouter at a URL the instruction names, so the route being graded is the one on screen from the start. The live preview beside you uses BrowserRouter instead, so links there really work. Your own route code is identical either way.
Version 6.26, pinned by the platform. The routing model is the same in 7; what changed is the package name and the fact that 7 leads with its framework mode, which needs a server. The final section says exactly what differs, so current documentation does not surprise you.
Its routing is built on the file system and a server, and Devpuff runs everything in your browser with nothing listening on a port. React Router is what a browser-only React app actually uses, and it is what most existing React codebases are routed with.
Crew Pages: the Crew board from the earlier React courses turned into a real multi-page app, with a persistent shell, a page per member at its own URL, filters that survive a reload, a not-found page, a guarded admin area, and the whole thing finally converted to a data router with loaders.
Yes. Finish every item in React Router and Devpuff issues a course certificate with a public verification page and an ID you can put on a CV or a LinkedIn profile.
How this course connects to the bigger picture, and what to explore next.
Share state across a React app with a store: selectors, actions, slices, and when not to.
Start programming for real: variables, strings, decisions, arrays, loops, functions, and objects.
Free to start, no credit card required. Write real code from the first lesson and keep your progress forever.
Start Learning FreeType your React code: props, state, hooks, events, and generic components.