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

Congratulations! You’ve completed this course! Let’s quickly review what you’ve learned.


# Course summary
- The `react-router` renders different components in different URLs. It helps to implement routing in ReactJS applications.
- The `react-router` provides different routes, such as `<BrowserRouter>`. The `<BrowserRouter>` subscribes to the URL and creates a history object.
- The `<Routes>` component matches routes with a location and renders the first match.
- The `<Route>` component takes the path and element and renders that element when the current location matches the path.
- A `<Route>` can be added inside other route components to create nested routes.
- The `<Outlet>` component must be rendered inside the parent route that contains child routes.
- The `<Link>` component helps `navigate` the user inside the application easily.
- A `<NavLink>` can be used to customize the link style.
- The `useParams` and `useSearchParams` hooks get and modify the query strings in the URL.
- A `path="*"` can be used to catch all the routes that don’t match the declared routes.
- The parent route renders the `index` route by default. Standard styling can be added to all the routes at once using the `layout` route.
- The `useLocation`, `useNavigate`, and `<Navigate>` components get the current location and navigate the user to a target location.


Let's recap what we learned in this course.

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

Wrap Up!

Course summary