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 navigation

Navigation enables the user to quickly go through different pages and resources across the website. Traditionally, an anchor tag (`<a>`) is used to implement navigation to another page or link.

# Concept of navigation in React

React is used to create single-page applications where page refresh shouldn’t be involved. This design is chosen because a page refresh clears the client state. If we use the anchor tag for navigation, clicking on the link triggers a page refresh. For this reason, we can’t use it in a React SPA to navigate between components. The `react-router` provides navigation interfaces that render a specific component by changing the current location.

There are two ways we can implement navigation through `react-router`:

## 1. By creating an element
The `react-router` provides the `<Link />` and `<NavLink />` components for navigation. These element show links that the users can click to navigate to specific URLs. This topic will be covered later in this lesson.

This type of navigation is used when we want the user to decide whether they want to click on a particular link or not. All the links that we use for this type of navigation should be visible to the user. They should also be styled in such a way that the user can easily differentiate them from the rest of the content.

## 2. By navigating programmatically
The `react-router` provides the `<Navigate />` and `useNavigate` hooks, which users can navigate programmatically through event handlers. This method can also be used to navigate to a different component in response to some changes in the application. This method will be covered in the following lessons.

This type of navigation is more suitable when we want the user to go to a particular page or website without having to click on a link. In this type of navigation, we’re navigating the user based on their actions. For example, when a user enters their username and password on the login page and clicks on the login button, the app should perform authentication and navigate the user to either the home or profile page. If the user isn’t authenticated and tries to access unauthorized pages or links, such as `/profile`, then the app should navigate the user to the login page. Programmatic navigation handles these cases.

# Link element

A `<Link />` element lets the user change the current location of the URL and navigate to another page. It renders an accessible `<a>` tag and prevents its default page refresh behavior.
Here’s an example of the syntax for a `<Link />` element:

`<Link to="/contacts">Go to Contacts</Link>`

In the above syntax, `to` is a prop that accepts an absolute address (the location to which we want to navigate). The `to` prop can accept a string or an object. There are more props for this component that’ll be covered later.

When the user clicks on this link, it changes the current location to `/contacts`. If the current URL is `http://localhost:3000` when the user clicks on the link, it changes the URL to `http://localhost:3000/contacts`. If there’s any path in the `Route` that matches this URL or link, then it renders the corresponding component.

>**Note:** The difference between `href` (in the anchor tag) and `to` (a prop of link element) is that `href` accepts either a relative or an absolute address, whereas the `to` prop of the `Link` element only accepts an absolute address. 

# `NavLink` element

The `NavLink` element uses  `style` or customization to show whether a link is `active`.

>**Note:** A link becomes active when a user clicks on it. For example, if we click on the `Contacts` link and land on the respective page, the `Contacts` link is considered `active`. 

The `NavLink` element has more features than the `Link` element. It also has all the props that a `Link` element has and adds additional props, such as the following:

`isActive`: When a function is called inside #key# style: A prop that’s used to add inline styles for a React component #key# or #key# className: A prop that’s used to pass class names for styling purpose #key# props, the function receives the `isActive` prop from the `NavLink` component as an argument. The `isActive` prop is a boolean. If the link is active, then isActive is true and vice versa.


`end`: This prop ensures that the current component isn’t marked as `active` when its descendent paths are matched.   

Learn about navigation within react-router.

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

Navigation in ReactJS

Introduction to navigation

Concept of navigation in React