Gain insights into React Router v6, learn types of routes, navigation, private routes, page animations, and code-splitting. Create dynamic, multi-page React apps through hands-on projects.

Frontend Development with React Router v6.png

react.tar.gz

Installing-React-Router

React JS is the most popular JavaScript framework for building interactive UIs. A React application typically consists of various views. A developer must provide convenient and familiar navigation between these views. React Router is a library that enables easy implementation of this navigation. 

This course will introduce you to the React Router basics, its routes, and its components. You'll learn different types of routes and how to apply navigation in a React app. You'll also learn advanced concepts related to routing and implement them in a React application. You'll also create an authentication app by implementing private and protected routes. You'll also learn to add animation while changing pages and improve the performance of your application by code-splitting.

By the end of this course, you’ll be able to create multi-page dynamic React applications using a React Router by doing a hands-on project. This knowledge will help you greatly in your journey to becoming a frontend/full-stack developer.

Getting Started with React Router v6

# Introduction to the query string 

The URL is more than just a website’s address. We can use the URL to send data, such as tokens and cookies, across different web pages.This can be achieved with a query string in conjunction with `react-router`, which we’ll explore in this lesson.

# What is a query string?

The query string is the part of the URL that sends information to a webpage. It’s comprised of the `parameter` (name) and its `value`, which are separated by the equal (=) sign in the URL.

Consider the following example:


`www.example.com/?key_name=value`

The question mark (`?`) separates the query string from the base URL. We can use an ampersand (`&`) to separate multiple queries as shown below:

`www.example.com/?key_name1=value1&key_name2=value2`

The `react-router` provides different ways to use query strings, which we explain in greater detail throughout this (and subsequent) lesson.  

# Updating the search component 

Let’s open the `Search.js` file from the coding widget given in the exercise section and add all the contact names below the search input. Next, we open the `App.js` file and add the `contactDetails` component inside the `search` route as a child route. This should be the same as the `/contacts` route. We can copy and paste the `ul` element from the `Contacts.js` file. We can also call the `getContacts` function to get all the contacts values.

Learn about and implement query strings in the search component of a React application.

Introduction

Getting Started

Routing

Navigation

Advanced Routing

Advanced Navigation/Links

Project: Authentication App

Bonus React Topics: Page Transitions and Code Splitting

What’s Next?

React Router Fundamentals

Query Strings

Introduction to the query string

What is a query string?