WEBVTT

00:00.000 --> 00:06.000
Routing and JavaScript

00:06.000 --> 00:08.000
In this video we will understand

00:08.000 --> 00:11.000
What is routing?

00:11.000 --> 00:13.000
What is routing?

00:13.000 --> 00:18.000
Routing and JavaScript refers to the process of navigating between different views or pages

00:18.000 --> 00:20.000
in a web application

00:20.000 --> 00:23.000
without reloading the entire page.

00:23.000 --> 00:26.000
Understanding, routing in the game.

00:27.000 --> 00:32.000
In new game, we have three pages, home, game, rules.

00:32.000 --> 00:36.000
Navigation in between this pages is called routing.

00:36.000 --> 00:38.000
Understanding it in code.

00:38.000 --> 00:43.000
In continuation with the previous video, we will understand routing in this video.

00:43.000 --> 00:48.000
We will add the code in the app.js file.

00:48.000 --> 00:52.000
We need to import, react, router DOM.

00:52.000 --> 00:55.000
If not available, you need to download it.

00:55.000 --> 00:59.000
Here, router wraps your app and enables routing.

00:59.000 --> 01:02.000
Routes hold all the defined routes.

01:02.000 --> 01:04.000
Root defines each route.

01:04.000 --> 01:08.000
Link creates clickable links without page reloads.

01:08.000 --> 01:10.000
This is the navigation bar.

01:10.000 --> 01:17.000
Home creates a clickable link that takes the user to the slash path without reloading the page.

01:17.000 --> 01:22.000
These define which component should be shown for which URL path.

01:22.000 --> 01:26.000
Slash shows the home component.

01:26.000 --> 01:29.000
Slash game shows the game component.

01:29.000 --> 01:33.000
Slash rules shows the rules.

01:33.000 --> 01:38.000
And about component, routing makes it easy to switch between different pages of your app

01:38.000 --> 01:41.000
without reloading the browser.