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

Which element is the dynamic segment in the following URL?

`https://twitter.com/:username/media`
 

Which element is the dynamic segment in the following URL?
<code>https://twitter.com/:username/media</code>

**(Select all that apply.)** Which are the child routes in the following code segment?

```
<Routes>
<Route path="/" element={<Home />}>
<Route path="contacts" element={<Contacts />} />
<Route path="search" element={<Search />} />
</Route>
</Routes>
```

(Select all that apply.) Which are the child routes in the following code segment?
<pre><code>&lt;Routes&gt;
&lt;Route path=&quot;/&quot; element={&lt;Home /&gt;}&gt;
&lt;Route path=&quot;contacts&quot; element={&lt;Contacts /&gt;} /&gt;
&lt;Route path=&quot;search&quot; element={&lt;Search /&gt;} /&gt;
&lt;/Route&gt;
&lt;/Routes&gt;
</code></pre>

Where should the `<Outlet />` component be placed?

Where should the <code>&lt;Outlet /&gt;</code> component be placed?

To extract the static segment from the current location/URL.

To extract the dynamic segment from the current location/URL.

To get all the parameters of the child routes.

To extract the object from the current location/URL.

What is the function of the `useParams` hook?

What is the function of the <code>useParams</code> hook?

The `*` element only matches the routes that are not declared in the application.

The `*` element only matches child routes.

The `*` element only matches parent routes.

The `*` element matches all the routes except the `No-Match` routes.

In the following code, what is the function of `*` in the path?

`<Route path="*" element={<h1>404 Page!</h1>} />`

In the following code, what is the function of <code>*</code> in the path?
<code>&lt;Route path=&quot;*&quot; element={&lt;h1&gt;404 Page!&lt;/h1&gt;} /&gt;</code>

**(Fill in the blank.)** The `index` and `layout` routes are also called ___________.

(Fill in the blank.) The <code>index</code> and <code>layout</code> routes are also called ___________.

Advanced Routing Quiz

Advanced Routing Quiz

Test your understanding of advanced 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: Implementing Advanced Routing in a React Application