From the course: Building Production-Ready React Apps: Setup to Deployment with Firebase
Unlock the full course today
Join today to access over 24,800 courses taught by industry experts.
Configure the routes and create a navigation component
From the course: Building Production-Ready React Apps: Setup to Deployment with Firebase
Configure the routes and create a navigation component
- [Instructor] So now we start to set up routes to map URLs and locations to specific React components. So each time you change the browser URL and path name, the user can navigate to the corresponding components. So to do that, we're going to use other components. I'm going to add them to the scope. So the first one will be routes. And another one, which is route. That we used to configure the routes. First, we add routes, which is like the parent of all the routes, so you must always configure your routes within this component, which is routes. And then to define a routes, it's going to take two props. So first the path, to define the location, the path name, and then the elements. So, which component to display when you navigate to this route. So that's going to be the route location. And for the components, we're going to specify App. So that's going to correspond to the homepage. Okay, so that's going to be the…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
-
-
-
(Locked)
Install React router DOM v62m 53s
-
(Locked)
Configure the routes and create a navigation component2m 51s
-
(Locked)
Use Link component to navigate between pages4m 58s
-
(Locked)
Allow navigation between multiple views5m 39s
-
(Locked)
Conditional rendering and protected route4m 45s
-
(Locked)
Use the React router hooks: useNavigate4m 58s
-
(Locked)
Use the React router hooks: useLocation4m 35s
-
(Locked)
Create the routes for "NotFound" and "Profile"5m 15s
-
(Locked)
Display the active link3m 42s
-
(Locked)
-
-
-