React Router Tutorial - 3 - Configuring Routes
Summary
TLDRThis 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
📚 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.
🔗 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.
Mindmap
Keywords
💡React Router
💡Routes
💡Home Route
💡About Route
💡Browser Router
💡Component
💡Path Prop
💡Element Prop
💡UI Element
💡Programmatic Navigation
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
Weitere ähnliche Videos ansehen
Routing | Mastering React: An In-Depth Zero to Hero Video Series
AWS: How To Setup A Site-to-Site VPN (Start to Finish) 2024
Next-Auth Login Authentication Tutorial with Next.js App Directory
The New Way To Create Protected Routes With React Router V6
⛅ Cloudflare Workers as a Web Server (with Webpack) #serverless (lesson 2)
062 Creating and Mounting Multiple Routers
5.0 / 5 (0 votes)