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

**(Fill in the blank.)** Traditionally, the ___________ tag is used to go through different pages and resources across the website.

(Fill in the blank.) Traditionally, the ___________ tag is used to go through different pages and resources across the website.

(True or False) Behind the scenes, a `<Link>` element renders an accessible `<a>` tag.

(True or False) Behind the scenes, a <code>&lt;Link&gt;</code> element renders an accessible <code>&lt;a&gt;</code> tag.

It's used to pass a component that renders on the `/contacts` URL.

It's used to change the current element to the `Contacts` component. 

It’s a prop that accepts a URL address (a location that we want to navigate to).

It’s used to navigate to external sources.

`<Link to="/contacts">Go to Contacts</Link>`

In the above code, what’s the function of `to`?

<code>&lt;Link to=&quot;/contacts&quot;&gt;Go to Contacts&lt;/Link&gt;</code>
In the above code, what’s the function of <code>to</code>?

(True or False.) The anchor (`<a>`) tag is best for linking a URL that’s part of the application.

(True or False.) The anchor (<code>&lt;a&gt;</code>) tag is best for linking a URL that’s part of the application.

The color of the `contacts` text will change to pink.

The color of the `contacts` text will change to green.

A border line will appear on the link text. 

```
<NavLink
 to="/contacts"
 style={({ isActive }) =>
 isActive ? { color: "green" } : { color: "pink" }
 }
>
 contacts
</NavLink>
```
For the above code, what will happen when `isActive` becomes true?

<pre><code>&lt;NavLink
 to=&quot;/contacts&quot;
 style={({ isActive }) =&gt;
 isActive ? { color: &quot;green&quot; } : { color: &quot;pink&quot; }
 }
&gt;
 contacts
&lt;/NavLink&gt;
</code></pre>
For the above code, what will happen when <code>isActive</code> becomes true?

**(Fill in the blank.)** In the `NavLink`, the ___________ prop ensures that the current component is not marked as `active` when its descendent paths are matched.

(Fill in the blank.) In the <code>NavLink</code>, the ___________ prop ensures that the current component is not marked as <code>active</code> when its descendent paths are matched.

Navigation Quiz

Navigation Quiz

Answer some questions about navigation using react-router in a React application. 

Quiz: Navigation with react-router

Answer some questions about navigation 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: Navigation with react-router