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 routing library

There are multiple ways to implement routing in React applications, such as by creating custom hooks. However, this approach is time-consuming, as it requires the creation of separate hooks for individual features.

Instead, we can use a feature-rich library, such as `react-router`, which is recommended by the React team. Top companies like Facebook, Netflix, Microsoft, and Discord all use this library.

# What is `react-router`?

The `react-router` is a routing library for React. Official documentation describes it as a fully-featured client-side and server-side routing library for React, a JavaScript library for building user interfaces.

We can use `react-router` on the web, NodeJS, and React Native. It has several advantages:

- The `react-router` is mainly used to make single-page applications (SPA). It maintains the behavior and structure of the web application.
- It allows us to use different browser functionalities such as refresh, back button, and locate objects.
- It’s easy to use and reduces the amount of code we have to write.
- It allows for navigation without refreshing the page. Because of this, we can maintain different states in our application.
- It provides many features like navigation, URL params, and passing props to components.


The following lessons will explore these concepts in more detail.

# Do we need to use `react-router` in all React applications?

We don’t need to use `react-router` if we develop a simple application or website that only needs minimal navigation and routing.

We can also use react hooks to achieve some basic routing functionalities. However, if we want complex navigation and to display multiple views in a single page application, we should use it in our React applications.


# Concept behind `react-router`

This lesson will dig a little deeper to explore how `react-router` works. You may skip this section if you already have a strong understanding of the concept.

## How does `react-router` work in the browser?

Before we dive into this topic, let’s make sure we understand some terminology.

`Location:` Each browser has a `location` object. We can access it via `window.location` and `document.location`. It can be used to get the current URL.

>**Tip:** Open the console in a browser tab and type `window.location` to get the whole `location` object.

`History:` This is the same as `window.location`. We can also try `window.history`, which returns a history object, which provides an interface to manipulate browser session history, including pages visited in the tab where the current page is loaded.

`History stack:` As the user navigates through different parts of the web app, the browser keeps track of each location in a stack called the history stack.
 
The following slides illustrate this concept.

Learn what react-router is and understand how it works behind the scenes. 

Introduction to React Router

Learn what react-router is and understand how it works behind the scenes.

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

Introduction to React Router

Introduction to the routing library

What is `react-router`?

React Router Fundamentals

Introduction to React Router

Introduction to the routing library

What is react-router?

What is `react-router`?