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 cover how to implement the nested, index, and layout routes in our project.

# Using nested routes

At present, our `<Navbar />` component is rendering outside of the routes. We can use nested routes to give the parent component (the `Wrapper /` component, in this case) more control over its child components. Let’s open the file called `Wrapper.js` from the coding widget given in the exercise section and add the following code:

import React from 'react'
import { Outlet } from 'react-router-dom';
import Navbar from './Navbar';

const Wrapper = () => {
  return (
    <>
    <Navbar />
    <Outlet />
    </>
  )
}

export default Wrapper

Wrapper.js

import { Route, Routes } from "react-router";
import "./App.css";
import Home from "./pages/Home";
import Dashboard from "./pages/Dashboard";
import Login from "./pages/Login";
import Profile from "./pages/Profile";
import Wrapper from "./components/Wrapper";

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Wrapper />}>
          <Route path="home" element={<Home />} />
          <Route path="dashboard" element={<Dashboard />} />
          <Route path="login" element={<Login />} />
          <Route path="profile" element={<Profile />} />
        </Route>
      </Routes>
    </div>
  );
}

export default App;


App.js

Let’s review the code. For the `Wrapper.js` file:

- **Line 8:** We move the `<Navbar />` component here from the App.js file.
- **Line 9:** We add the `<Outlet />` component because the `<Wrapper />` component will be the parent component and render different child components.

For the `App.js` file:
- **Lines 13–18:** We add the `<Wrapper />` component here as the parent route of all the child routes at the `/` path.
- For all the other routes, we remove the forward slash (`/`) from the path property.


# Adding an index route

Instead of creating a new route for the homepage, such as `/home`, we can make it an index route. That way, whenever a user lands on the `/` path, the web app renders the `<Home />` component.

Add index, layout, and nested routes 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

Add Index and Layout Routes

Using nested routes