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/

...

/

Challenge: Create a New Route

Challenge: Create a New Route

Let’s complete the challenge given in this lesson.

We'll cover the following...

Challenge
Solution

Challenge

In this challenge, we’ll create a profile page in a React application. Visiting the /profile page should show the words “My Profile” in an h2 element with a CSS title class. It should also display ...