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

In some cases, we’ll need to redirect the user to a specific URL when the user completes any action or task, such as submitting a form or creating an account.

To accomplish this, `react-router` provides two ways to navigate users programmatically:
 
1. The `useNavigate` hook
2. The `Navigate` element

# 1. Using the `useNavigate` hook

The `useNavigate` hook returns a function that we can use inside another function or in elements such as buttons to help navigate the user programmatically.

Use the coding widget given in the exercise to open the `ContactDetails.js` file and paste the following code:  

import React, { useEffect, useState } from "react";
import { useParams, useSearchParams, useNavigate } from "react-router-dom";
import { getContact } from "../Data";

const ContactDetails = () => {
  let params = useParams();
  // console.log(params);

  const [contactData, setContactData] = useState();
  let [searchParams, setSearchParams] = useSearchParams();
  let navigate = useNavigate();

  useEffect(() => {
    let data = getContact(Number(params.contactId));
    // console.log(data);
    setContactData(data);
  }, [params]);

  const handleButtonClick = (event) => {
    event.preventDefault();
    navigate("../", { replace: true });
  };

  return (
    <div className="contactDetails">
      <h2 className="subTitle">Contact Details</h2>
      {contactData ? (
        <ul className="contact">
          <ol>
            <strong>Name: </strong>
            {contactData.name}
          </ol>
          <ol>
            <strong>Number: </strong>
            {contactData.number}
          </ol>
          <ol>
            <strong>Email: </strong>
            {contactData.email}
          </ol>
          {searchParams.get("searchText") ? (
            <ol>
              <strong>Search Value: </strong>
              {searchParams.get("searchText")}
            </ol>
          ) : null}
        </ul>
      ) : (
        <span>There is no data available for given contact Id.</span>
      )}
      <button
        className="back-btn"
        onClick={(event) => handleButtonClick(event)}
      >
        Go Back
      </button>
    </div>
  );
};

export default ContactDetails;


ContactDetails.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;
  padding: 0;
}

.contact-list-item {
  width: 10rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
  background-color: blueviolet;
  color: white;
  border-radius: 8px;
  text-align: center;
}
.contact-list-item a {
  color: inherit;
  text-decoration: none;
}

.search-input {
  width: 80%;
  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;
}

.contactDetails {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.subTitle {
  font-size: 1.5rem;
  text-transform: uppercase;
  border-bottom: 2px solid blueviolet;
  margin-bottom: 0;
}

.contactDetails ul {
  background-color: blueviolet;
  color: #fff;

  padding: 1.5rem;
  list-style: none;
  width: max-content;
  border-radius: 8px;
}

.contactDetails ul ol {
  padding: 0;
  margin: 0;
}

.no-match {
  width: 100vw;
  height: 100vh;
  background-color: blueviolet;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.no-match h1 {
  font-size: 3em;
  font-weight: 300;
}
.no-match h2 {
  font-size: 2em;
  font-weight: 300;
  margin-bottom: 4rem;
}
.no-match a {
  background-color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.2s ease;
}

.no-match a:hover {
  transform: scale(1.1);
}

.layout {
  border: 2px solid blueviolet;
  width: 80%;
  min-height: 80vh;
  margin-top: 1rem;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}
.back-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background-color: blueviolet;
  color: #fff;
  border: 2px solid blueviolet;
  outline: none;
  border-end-start-radius: 50px;
  border-top-left-radius: 50px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}


App.css

Let’s take a look at the code line by line. For the `ContactDetails.js` file:

**Line 2:** We import the `useNavigate` hook.

**Line 11:** We add a declaration for the `useNavigate` hook.

**Lines 51–56:** We add a button with the class name `back-btn`. It’s connected with the `handleButtonClick` function.

**Lines 19–22:** We invoke the `handleButtonClick` function when the user clicks on the “Go back” button. It uses the `navigate` function and redirects the user to the parent route, which in this case is either `/search` or `/contacts`.

The `navigate()` function accepts two arguments:
- `to:` The address where want to redirect the user to. This is the same as the `<Link />` element.
- `replace:` An optional boolean value. If `true`, it replaces the current location with the given location. It also performs the `replace` action on the history stack. 

We can also pass numbers in the arguments, such as for a back button. Instead of passing `to` props, we would use `navigate(-1)` to redirect the user to the previous page or entry stored in the history stack.

The `App.css` file contains styling for the back button. Run the exercise coding widget after adding the above code, and click on the URL next to “Your app can be found at:” to open the application in a new tab. In the output tab, click on any contact from either the `/contacts` or `/search` routes.

# 2. Using `Navigate` element

Unlike the `useNavigate` hook, the `Navigate` element doesn’t have a function. Instead, it’s similar to the `<Link />` element. When it renders, it sends the user directly to the given location. The `Navigate` element can be used to programmatically navigate a user around our web application.

Open the `ContactDetails.js` file from the exercise widget and implement the following code:

Learn how to navigate the user programmatically in 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

Navigate Programmatically

Introduction

1. Using the `useNavigate` hook

React Router Fundamentals

Navigate Programmatically

Introduction

1. Using the useNavigate hook

1. Using the `useNavigate` hook