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

In this lesson, we’ll learn to use the `Context` data in all the components.

# Getting data from Context Provider

We’ve created a required state as well as functions like `user`, `error`, `isAuthenticated()`, and `signOut()` in the AuthContext.js file. Let’s run the code widget given in the exercise section and paste the following code into the appropriate component files: 




import React, { useContext } from "react";
import { AuthContext } from "./../context/AuthContext";

const Dashboard = () => {
  const { isAuthenticated, user } = useContext(AuthContext);

  return (
    <div>
      <h1 className="title">Dashboard</h1>
      <div>
        <h2 className="sub-title">
          Welcome! &nbsp;
          {isAuthenticated ? user.first_name : null}
        </h2>
      </div>
    </div>
  );
};

export default Dashboard;


Dashboard.js

import React from "react";
import { useContext } from "react";
import { AuthContext } from "./../context/AuthContext";

const Profile = () => {
  const { user } = useContext(AuthContext);

  return (
    <div>
      <h1 className="title">Profile</h1>
      {user && (
        <>
          <h2 className="sub-title">
            <strong>Id:</strong> {user.id}
          </h2>

          <h2 className="sub-title">
            <strong>First_Name:</strong> {user.first_name}
          </h2>
          <h2 className="sub-title">
            <strong>Last_Name:</strong> {user.last_name}
          </h2>
          <h2 className="sub-title">
            <strong>Email:</strong> {user.email}
          </h2>
        </>
      )}
    </div>
  );
};

export default Profile;


Profile.js

import React, { useContext } from "react";
import { NavLink } from "react-router-dom";
import { AuthContext } from "./../context/AuthContext";

const Navbar = () => {
  const { isAuthenticated, signOut } = useContext(AuthContext);

  return (
    <div className="navbar">
      <NavLink
        className={({ isActive }) => (isActive ? "active" : undefined)}
        to="/"
      >
        home
      </NavLink>
      <NavLink
        className={({ isActive }) => (isActive ? "active" : undefined)}
        to="dashboard"
      >
        dashboard
      </NavLink>
      <NavLink
        className={({ isActive }) => (isActive ? "active" : undefined)}
        to="login"
      >
        login
      </NavLink>

      <NavLink
        className={({ isActive }) => (isActive ? "active" : undefined)}
        to="profile"
      >
        profile
      </NavLink>
      {isAuthenticated && (
        <button className="btn-light" onClick={() => signOut()}>
          Logout
        </button>
      )}
    </div>
  );
};

export default Navbar;


Navbar.js

All the above files need the AuthContext to be imported with the useContext hook. Let’s review the code:
- For the `Dashboard.js` file:
    - **Line 13:** If the `isAuthenticated` state is `true`, then we display the user’s first name.
- For the `Profile.js` file:
     - **Lines 11–27:** If the user state is not undefined, then we display the user’s details.
- For the `Navbar.js` file:
    - **Lines 35–39:** If the `isAuthenticated` state is `true`, then we display the logout button. This button is connected to the `signOut` function.

Add the required data in the components using Context API.

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

Use the Context Data in Components

Getting data from Context Provider