React Router Tutorial - 3 - Configuring Routes

Summary

This tutorial video teaches how to set up routes using React Router for a simple web application. It covers configuring the home and about pages, wrapping the app with the Browser Router, and creating separate components for each route. The script also hints at future lessons on user navigation through UI elements and programmatic route changes, enticing viewers to stay tuned for more.

Takeaways

• 🚀 The video teaches how to configure routes with React Router for a web application.
• 🌐 Two main routes are set up: the home route and the about route, corresponding to the root and '/about' URL paths.
• 📝 The 'index.js' file is where the app component is initially rendered to the DOM.
• 🏠 The home route is rendered when the user navigates to 'localhost:3000'.
• 📖 The about route is rendered when the user navigates to 'localhost:3000/about'.
• 🔄 To configure routing, the 'BrowserRouter' from 'react-router-dom' is used to wrap the entire app.
• 🛠️ A new 'components' folder is created with 'Home.js' and 'About.js' files for the respective route views.
• 📂 'Home.js' and 'About.js' are simple functional components rendering text for their respective pages.
• 🔑 The 'Routes' and 'Route' components from 'react-router-dom' are used to define the path and element for each route.
• 🔄 The 'path' prop in the 'Route' component is used to match the URL path, while the 'element' prop specifies the component to render.
• 🔗 The video concludes with a summary of the steps taken to configure routing and a teaser for the next video on navigating routes using UI elements.

Q & A

What is the main topic of the video?

The main topic of the video is how to configure routes with React Router in a React application.

What are the two routes set up in the video scenario?

The two routes set up are the home route, which is accessible at localhost port 3000, and the about route, accessible at localhost port 3000/slash/about.

What is the purpose of the BrowserRouter component from React Router?

The BrowserRouter component is used to connect the URL in the browser with the React application, allowing the use of all React Router features within the app component tree.

What is the first step to configuring routes with React Router as described in the video?

The first step is to wrap the root component of the app with the BrowserRouter component from the React Router package.

Where is the app component rendered to the DOM in the given scenario?

The app component is rendered to the DOM in the index.js file.

What components need to be created for the app root and '/about' URL in the video?

Two components need to be created: Home.js for the app root and About.js for the '/about' URL.

What are the two props specified on the Route component in the video?

The two props specified on the Route component are 'path', which reflects the path in the URL, and 'element', which is the component to be rendered when the path is matched.

How can users navigate to different routes in a typical web application?

Users can navigate to different routes by clicking on UI elements like links or by being programmatically navigated to a different route after an action has been completed.

What does the video suggest will be covered in the next video?

The next video will cover navigating to different routes using an element in the UI with React Router.

What is the final outcome of the route configuration in the video?

The final outcome is that the home component is viewable at localhost port 3000 and the about component is viewable at localhost port 3000/about, with the routes working as expected.

Outlines

00:00

📚 Configuring Basic Routes with React Router

This paragraph introduces the process of setting up routes using React Router for a simple application with two main pages: Home and About. The tutorial begins by explaining the need to connect the browser's URL with the React application using the 'BrowserRouter' component. It then details the creation of two new components, 'Home' and 'About', which will represent the respective pages. The 'Routes' and 'Route' components from React Router are imported and utilized to define the paths for these components. The 'path' prop is used to match the URL path, while the 'element' prop specifies which component to render. The paragraph concludes by showing the application of these routes in the browser, with the 'Home' page displayed at the root URL and the 'About' page at the '/about' path.

05:02

🔗 Understanding Navigation in React Router

The second paragraph delves into the navigation aspect of React Router, explaining that while the previous setup allows for URL-based navigation, it's not the typical user experience. It highlights the need for UI elements like links for user interaction and programmatic navigation post-actions. The summary recaps the steps taken so far: wrapping the root component with 'BrowserRouter', creating view components for different URL paths, and configuring routes with 'Routes' and 'Route'. It emphasizes the current navigation method's limitations and hints at the next tutorial's focus on navigating routes using UI elements and programmatically, promising to explore these methods in more detail.

Keywords

💡React Router

React Router is a standard library for routing in React applications. It allows developers to define navigation paths and associate them with specific components, enabling a single-page application (SPA) to handle multiple views without page reloads. In the video, React Router is used to configure routes for a home page and an about page, demonstrating its core functionality in a web development context.

💡Routes

In the context of web development, 'routes' refer to the paths used to access different pages or resources in an application. The script discusses setting up two routes: the home route and the about route. Each route is associated with a specific URL path and a React component that renders when that path is accessed.

💡Home Route

The 'home route' is the default route of an application, typically accessed by navigating to the base URL (e.g., 'localhost:3000'). In the video, the home route is configured to display a 'home page' when the user visits the root URL of the application, illustrating the basic usage of routing in React.

💡About Route

The 'about route' is a specific path in the application that leads to an 'about' page, usually accessed by appending '/about' to the base URL. In the script, configuring the about route involves setting up a path that, when visited, renders the 'about' component, showing how to create and link secondary pages in a React application.

💡Browser Router

Browser Router is a component provided by React Router to manage the browser's history using the HTML5 history API. It wraps the entire application and allows the use of navigation features within the app component tree. In the video, Browser Router is used to connect the application's UI with the browser's URL, enabling navigation between different routes.

💡Component

In React, a 'component' is a modular piece of code that represents a part of the user interface. The script describes creating 'home' and 'about' components, which are simple functional components that render text. These components are then associated with specific routes to display their content when the corresponding URLs are accessed.

💡Path Prop

The 'path prop' is a property used within the 'Route' component in React Router to specify the URL path that triggers the rendering of a component. In the video, the path prop is set to '/' for the home route and '/about' for the about route, defining the URLs that will display the respective components.

💡Element Prop

The 'element prop' in the 'Route' component is used to specify the React component that should be rendered when the route's path matches the current URL. In the script, the element prop is assigned the 'home' component for the root path and the 'about' component for the '/about' path, demonstrating how to map components to routes.

💡UI Element

A 'UI element' refers to any interactive component in a graphical user interface, such as buttons or links. The script mentions UI elements in the context of navigation, where users can click on links to navigate to different routes within the application, providing a more dynamic user experience than manually entering URLs.

💡Programmatic Navigation

Programmatic navigation is the process of changing the route or view in an application through code, rather than user-initiated actions like clicking a link. The video script hints at covering this concept in a follow-up video, where it would likely involve using React Router's navigation functions to redirect the user to a different route based on certain actions or events.

Highlights

Introduction to configuring routes with React Router for a web application.

Setting up two routes: home and about for a basic React application.

Explanation of the default behavior when navigating to the root URL.

Demonstration of viewing the about page by accessing a specific URL.

Overview of the current application structure with `index.js` and `app.js`.

Importing and using `BrowserRouter` to connect the browser URL with the React application.

Wrapping the entire app with `BrowserRouter` to enable route features.

Creating new component files for the home and about pages.

Configuring routes by importing `Routes` and `Route` from React Router DOM.

Defining the root route with a path of '/' and rendering the `Home` component.

Setting up the about route with a path of '/about' and rendering the `About` component.

Ensuring components are imported for proper route rendering.

Visual confirmation of route functionality in the browser.

Summary of the steps involved in configuring routes with React Router.

Teaser for the next video on navigating routes using UI elements.

Encouragement for viewers to subscribe for more content.

Transcripts

welcome back

in this video we're going to learn how

to configure routes with react router

for our scenario we're going to set up

two routes the first route is the home

route

if the user navigates to localhost port

3000 they should be able to see the home

page and if the visit localhost 3000

slash about

they should be able to see the about

page

let's head over to es code and

understand how to achieve this with

react router

at the moment in the source folder we

have index.js

where we render the app component to the

dom

the app component is present in app.js

and contains a very simple ui

react logo and some text

if we take a look at the browser

we should be able to see the same being

rendered

now the first step to configuring routes

with react router is to connect the url

in the browser with our react

application

for that react router provides a

component called browser router with

which we need to wrap our entire app

so in index.js

at the top

import

from react router dom

a component called browser router

next wrap the app component with browser

router

what this allows us to do is use all the

features from react router within the

app component tree

let's head over to app.js and configure

the routes

i'm going to begin by removing the

components jsx in its entirety and also

the import statements

but before we configure the routes we

need the components that need to be

rendered for the app root and slash

about in the url

so in the source folder i'm going to

create a new folder called components

within this folder i'm going to create

two files

home dot js

and

about dot js

within home.js create a very simple

function component

that renders the text home

page do the same in about.js so copy

paste and change home to about

now that we have the two views

let's configure the

routes for the route configuration we

need two components from react router

so in app.js at the top

import

routes and route

from

react router dom

in the component jsx add the routes

component

within the routes component we defined

the individual route using the route

component

on the route component we specify two

props

the first prop is path

which reflects the path in the url

our first route is the root of the app

which is localhost port 3000

and that is denoted by a forward slash

so the value to the path prop is a

forward slash

we then tell react router

what is the element that needs to be

rendered when the url matches this path

in our case it would be the home

component

so we add the second prop which is

element

and to this we assign the home component

make sure to import home component at

the top if we now head back to the

browser

we should see the text home page being

rendered

the gsx from home component

our first route is working as expected

let's configure the second route now

invoke the route component once again

we're going to set path

to about

and element

is going to be equal to the about

component

make sure to import it at the top

so we are asking react router to render

the about component

when the path in the url is about

of course in both these cases route can

be a self-closing tag

if we head back to the browser

and type localhost port 3000

slash

about

you can see the about page being

rendered

our route configuration is working as

expected

this is pretty much how you configure

routes with react router

let me quickly summarize the steps

step one

we wrap the root component of the app

with browser router from the react

router package

in our case we wrapped the app component

with browser router

step 2 create the components that need

to be rendered at different url parts

we created the home and about components

step 3

configure the routes using the routes

and route components from react router

routes at the top level which can

contain multiple route components

each route will accept a path prop which

corresponds to the path in the browser

url

and the corresponding react element to

render when the path is matched

we have set home component for root of

the app

and about component for the about path

this lets us view the home component at

localhost port 3000 and the about

component at localhost port 3000 slash

about

but what you might have noticed is that

we navigate to the different pages by

entering the url in the browser address

bar

this of course is not how a regular user

would navigate in a web application

typically we have a ui element like a

link which the user can click to

navigate to a different route or the

user could also be navigated

programmatically to a different route

after an action has completed for

example

let's learn how to do the same with

react router

in the next video let's understand

navigating to different routes using an

element in the ui

thank you for watching make sure to

subscribe to the channel and i'll see

you in the next one