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

The `NavLink` is better for styling links than the `Link` component. Since the application has a navigation bar, it’s best to use `NavLink` to show different styles for active links.

# Add the `NavLink` component

Let’s open the Navbar.js file and add the following code:

import React from "react";
import { NavLink } from "react-router-dom";

const Navbar = () => {
  return (
    <div className="navbar">
      <NavLink
        className={({ isActive }) => (isActive ? "active" : undefined)}
        to="/contacts"
      >
        Contacts
      </NavLink>
      <NavLink
        className={({ isActive }) => (isActive ? "active" : undefined)}
        to="/search"
      >
        Search
      </NavLink>
    </div>
  );
};

export default Navbar;

Navbar.js

.App {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contacts,
.search {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 3rem;
  text-transform: uppercase;
  border-bottom: 2px solid blueviolet;
}

.contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: max-content;
}

.contact-list-item {
  width: 100%;
  padding: 0.5rem;
  margin: 0.5rem 0;
  background-color: blueviolet;
  color: white;
  border-radius: 8px;
  text-align: center;
}

.search-input {
  width: 100%;
  border-radius: 4px;
  padding: 0.5rem;
  border: 1px solid blueviolet;
  outline: none;
}

.navbar {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blueviolet;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  height: 5rem;
}

.navbar a {
  margin: 1rem 2rem;
  color: inherit;
  text-decoration: none;
  transition: all 0.3s ease;
}
.navbar a:hover {
  color: #000;
}

.navbar .active {
  border-bottom: 2px solid #fff;
}

.navbar .active:hover {
  border-bottom: 2px solid #000;
}

App.css

Let’s review the code line by line. In the `Navbar.js` file:

**Lines 8–14:** We replace `Link` with `NavLink` and import it from the `react-router-dom`. The `to` prop has the absolute path for the route that we wish to connect with this link.

**Lines 9 and 15:** In the `className`, there’s one arrow function that returns `isActive` props, which tell the user whether the link is active or not. When `isActive` is true (the link is active), the arrow function sets the `className` to `active`. Otherwise, no `className` will be applied.

In the `App.css` file:

**Line 71:** We add an `active` class for active links.
  
# Exercise

Implement the above code in the following coding widget. After implementing the code, click on “Save” and “Run” to see the output. Remember to add `NavLink` instead of the `Link` component and add CSS in the `App.css` file.  

Learn to implement NavLink using react-router in the React application. 

Implementing Routing With the NavLink Element

Learn to implement NavLink using react-router in the 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

Implementing Routing With the NavLink Element