Routing in React

The Routing chapter turns a single React page into a multi-page app with React Router, then protects pages so only the right users can open them.

What each lesson covers:

• Client-Side Routing: BrowserRouter, Routes and Route, Link and NavLink, useNavigate, route and query parameters, nested and index routes, layouts and a Not Found page.
• User Access Control: Authentication and authorization with JWT: the login flow, user identity and roles, role-based access control, protected routes and guards, an auth context and auth service, login state, logout and best practices.

Together these lessons cover the navigation and sign-in pieces that most real React apps need.

Every page runs real React in your browser. Edit the code and see the result next to it. Each lesson ends with exercises that check what your app shows, not how your code is written.

Lessons in this section

1. Client-Side Routing

   Routing with React Router: BrowserRouter, Routes and Route, Link and NavLink, useNavigate, route and query parameters, nested and index routes, layouts and a Not Found page.

2. User Access Control

   Authentication and authorization with JWT: the login flow, user identity and roles, role-based access control, protected routes and guards, an auth context and auth service, login state, logout and best practices.