0% completed

All LessonsFree Lessons (7)

Introduction

Why Take This Course?Course Overview What is Routing?Client-Side Routing vs Server-Side Routing Introduction to React Router Quiz: Introduction to Routing

Getting Started

Creating a React App and Installing react-router

Configure the App to Use react-router

Create the Necessary Components of the React App

Quiz: Installing and Configuring React Router

Routing

Routing in React Js Implementing Routes in a React Application Challenge: Create a New Route The Use of useRoutes Hook Quiz: Creating Routes in a React Application Using React Router

Navigation

Navigation in ReactJS Implementing Routing With the Link Element Implementing Routing With the NavLink Element Quiz: Navigation with react-router

Advanced Routing

Nested Routes and Outlet Component Reading URL Params by Using useParams "No Match" Route and Passing Props to Component Index Routes & Layout Routes Quiz: Implementing Advanced Routing in a React Application

Advanced Navigation/Links

Query Strings The Use of useLocation and useSearchParams Navigate Programmatically Passing Props to a Link Quiz: Implementing Advanced Navigation in a React Application

Project: Authentication App

Project Setup and Initialization Add Routes and Links Add Index and Layout Routes Add Login Functionalities Using Context API Use the Context Data in Components Private Routes and Restricted Routes Quiz: Authentication App

Bonus React Topics: Page Transitions and Code Splitting

Animated Page Transitions Code Splitting in React JS Quiz: React Bonus Topics

What’s Next?

Wrap Up!Project Ideas for Practice

Course Assessment

React Router Fundamentals

Project

Create a Website with Dynamic Routing Using React Router

Getting Started with React Router v6/

...

/

Quiz: Installing and Configuring React Router

Quiz: Installing and Configuring React Router

Test your understanding of react-router.

We'll cover the following...

The react-router Quiz

1.

(Fill in the blank.) CRA stands for ___________.

A.

Configure React App

B.

Create React App

C.

Create Router App

D.

Create React Auth

1 / 6