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

**(Select all that apply.)** Which of these components and hooks provide routing functionalities? 

(Select all that apply.) Which of these components and hooks provide routing functionalities?

It's used to match the path with the URL.

It’s a prop that’s used to pass a React component.

Which statement is true about the element in the following code?

`<Route path="/contacts" element={<Contacts />} />`

Which statement is true about the element in the following code?
<code>&lt;Route path=&quot;/contacts&quot; element={&lt;Contacts /&gt;} /&gt;</code>

**(True of False.)** We can use the `<Route>` component without using `<Routes>`.

(True of False.) We can use the <code>&lt;Route&gt;</code> component without using <code>&lt;Routes&gt;</code>.

**(Fill in the blank.)** If we want to implement Javascript’s object-based approach for routing, then we should use ___________.

(Fill in the blank.) If we want to implement Javascript’s object-based approach for routing, then we should use ___________.

It provides the same functionalities as the `<Routes>` component.

It uses the `<Route>` component in its implementation.

`useRoutes` is used to implement routing using JavaScript Object-based approach. 

It’s a component provided by `react-router`.

(Select all that apply.) Which statements are true about `useRoutes`?

(Select all that apply.) Which statements are true about <code>useRoutes</code>?

**(True or False)** We have to add the whole URL in the path prop of the <Route> component in the following code:

`<Route path="/contacts" element={<Contacts />} />`

(True or False) We have to add the whole URL in the path prop of the <Route> component in the following code:
<code>&lt;Route path=&quot;/contacts&quot; element={&lt;Contacts /&gt;} /&gt;</code>

Routing Quiz

Routing Quiz

Test your understanding of routing using react-router 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

Quiz: Creating Routes in a React Application Using React Router