React Router v6

React Router v6

English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 4h 31m | 1.79 GB

Take complex React routing to the next level with this whirlwind tour of the API and build a real project. Learn component-based routing best practices, authentication scenarios, hidden gems and champion your next React app.

  • Dynamic, ambiguous and nested routes
  • Hook-based API
  • Public and secure routes via Auth
  • Query / Search Parameters and Route Parameters
  • Declarative and programmatic navigation
  • Lazy loading, code splitting, suspending
  • Object-based route configurations
  • Redirects, 404 Not Found, and default routes
Table of Contents

1 The Missing Introduction to React Router
2 Project Walkthrough and Install
3 Introducing the BrowserRouter
4 Route and Path declarations
5 Switching Route elements with Routes
6 Handling 404 Not Found routes
7 Redirecting 404 Not Found routes
8 Navigating to routes with Link
9 Active link states with NavLink
10 Active styles on NavLink
11 Nested Routes and Outlet
12 Fetching Data in Nested Routes
13 Relative and Absolute Navigation with Link
14 Creating Dynamic Routes
15 Reading Route Params with useParams() Hook
16 Fetching Dynamic Data with Route Params
17 Programmatic Navigation with useNavigate()
18 Replacing Router State on Navigation
19 Passing State on Navigation alongside useLocation()
20 Understanding Navigation Deltas with useNavigate()
21 Domain-Driven Nested Routes
22 Restricting Access with a ProtectedRoute Component
23 Re-investigating Relative Link Paths
24 Using Link with Nested Routes
25 Creating a new Product from a Form
26 Redirecting upon Product Create
27 Retrieving an existing Product
28 Updating an existing Product
29 Deleting an existing Product
30 Passing Props to Routed Components
31 Reading Search Params with useSearchParams()
32 Syncing Search Param State with UI State
33 Rendering UI from Search Param State
34 Scrolling to Top after Route Transitions
35 Object-based Route Config with useRoutes()
36 Code Splitting and Lazy-Loading Components
37 Creating a Suspense-ready Lazy-Load Component