React Router (V6) - The Complete Guide

Master React Router API with practical best practices. Learn component-based routing, authentication scenarios, and more

What you'll learn

Understanding the basic concepts of React Router

Master Nested Routes in React Router by learning how to define child routes and use components for your nested routes

Develop Protected Routes by learning how to protect some routes with authentication patterns

Fetch data from Rest-API endpoints by using React Router API features

Learn best practices in navigation between different paths of your application with relative and absolute navigation techniques

Build dynamic routes and implement navigation based on data coming from backend server

Learn how to pass parameters and use them in your components using URL Parameters in React Router

Learn advanced concepts and practices such as navigation deltas, passing state with navigation and domain-driven routing

Requirements

Basic knowledge in ReactJS

Description

Welcome to the only Udemy course teaching React Router from zero to mastery!In this course I teach you everything you need to know about React Router v6 as a react developer by building a real-life project from the ground up. With this course you will master all the complex React routing concepts with concrete real-life examples as we move on a full-stack building an online book shop single page application.I will walk you beyond the information that you can find in the documentations and blogs and teach you industrial best practices with real-world scenarios that do make sense for you and level up your skills as a React developer for real.You will learn how to implement different types of component-based routing into your application along with other scenarios such as protected routes and authentication.Most of the resources out there, only mention React router as a side-tool in their courses but in this course all the materials are meant to teach you the React router API with all the best practices and some of the hidden tips that I learned the hard way in my career life as a React developer, to prepare you for developing your React projects as an expert.First we explore the basic concepts such as declaring a path, adding some styles based on the active path and how to deal with 404 routes.Then we move on to learning navigation and using elements such Link and Navlink in React Router v6.After that we touch on advanced topics in React routing including nested routing, dynamic routing, fetching data based on URL parameters and more.Finally, we implement a complete set of CRUD operations against a backend server to experiment all the React routing features related to CRUD operations and see a lot of routing best practices for enhancing our data fetching and CRUD operations.So, hopefully I will see you in the course to start leveling up your React Routing Skills.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Requirements

Lecture 3 React Project Setup

Lecture 4 Server Demo Walk-through

Section 2: Basic concepts

Lecture 5 Using Browser Router Element

Lecture 6 Declaring Paths

Lecture 7 Styling Paths

Lecture 8 404 Not Found Routes

Lecture 9 Redirecting 404 Routes

Section 3: Navigation and Links

Lecture 10 Navigation

Lecture 11 Handling states of active NavLink

Section 4: Advanced Routing

Lecture 12 Nested Routes with Outlet

Lecture 13 Fetching Data via Nested Routes

Lecture 14 Relative and Absolute Navigation

Lecture 15 Dynamic Routes

Lecture 16 Accessing Route Params

Lecture 17 Fetching Data with Route Params

Lecture 18 Implementing Programmatic Navigation

Lecture 19 Passing State along Navigation

Lecture 20 Navigation Deltas Concepts

Lecture 21 Domain-Driven Routes

Lecture 22 Restricting Access to Routes

Section 5: Routing techniques for CRUD operations

Lecture 23 a Second Approach of Relative Paths

Lecture 24 Using Link with Nested Routes

Lecture 25 Creating a New Book

Lecture 26 Redirecting after Creating Books

Lecture 27 Reading an Existing Book

Lecture 28 Updating a Book

Lecture 29 Deleting a Book

Lecture 30 Using Search Params

Lecture 31 Linking UI state with Search Params States

Lecture 32 Rendering UI with Search Params

Lecture 33 Adding Page Scrolling upon Route Changes

Lecture 34 Object-based Route Setup

Section 6: Next steps

Lecture 35 Recap and Next Steps

React developers looking to learn or level up their current knowledge in React Router API,Front-end Developers,Developers looking to learn React