Summary

Summary of Lecture on URL Parameters with React Router v3

Introduction

In this lecture, we will learn how to work with URL parameters using React Router version 3. We will create a new "Product Profile" page that uses a URL parameter to display specific product information.

Objectives

Understand how to define and access URL parameters in React Router.
Create a simple component for the product profile page.
Display the product ID based on the URL.

Creating the Product Profile Page

Setup: Create a file named ProductProfile.js under the src directory.

Component Structure: Define a stateless functional component that displays a message including the product ID.

import React from 'react';

const ProductProfile = (props) => {
    return (
        <div>
            <h1>Product Profile</h1>
            <p>This is product profile page for the product with ID: {props.params.productID}</p>
        </div>
    );
};

export default ProductProfile;

Defining the Route

Route Setup: In your App.js, add a new route for the product profile:
```
<Route path="/products/:productID" component={ProductProfile} />
```
- The :productID syntax defines productID as a URL parameter.

Testing the Route

Visit /products/3 in the browser to view the product profile page.
If you change the URL to /products/anything, the page will still load, demonstrating how any string after /products/ is accepted as a parameter.

Accessing the Parameter

Within the ProductProfile component, access the productID using props.params.productID.
You can console log the injected props in App.js to see what else are provided by React Router.

Important Notes

URL parameters are always strings; if numeric operations are required, parse them accordingly.
React Router injects several props that can be useful for different functionalities such as location, router, etc.

Conclusion

In this lecture, we learned how to create a new product profile page, set up a route with a URL parameter, and access that parameter within the component. Thank you for watching! Please like and subscribe if you found this helpful.

Feel free to reach out for any further clarification!

Video Transcript

Hello everybody, welcome back. In this lecture we're going to learn how to deal with URL parameters with ReactVouter version 3. So back to our wireframes kind of thing here. We have the about page and products page. How about to create a third page? That's going to be the product profile page. So typically these pages, when you click product one or product two or whatever, it goes to a route something like slash product slash the actual product ID. Say it was product one has a product ID one, it would go to slash products slash one, right? And product two slash two and so on. So this is actually going to be a URL route parameter. Okay in ReactVouter they call it a URL parameter. So a parameter, this is the parameter we're going to define in our route called product ID. So based on this product ID we're going to be able to display it in the page, some message or whatever. This is the product profile page for the product ID with ID whatever you type in the URL. Obviously you wouldn't do these simple things here. The product ID would be more useful to make a HP request using that product ID, that kind of stuff. You get it what I mean, right? So let's learn how to access those URL parameters and how to define a route that takes URL parameter. So let's first start off with this product profile. Let's make it really simple as before. So let's go and create under the SRC directory, create a file called for productprofile.js. Let's keep it simple and just use a stateless functional component. So let's do const product profile props. Actually in this case I'll want to just use this other way. Don't forget to import React from React because we will be using JSX inside of return here. So let's do a div with just a message saying whatever we said there. This is product profile page for the product with ID. The product profile page for the product with ID whatever we don't know it yet. Something that to be completed. Alright XYZ. So let's export default at the end. Product profile. I forgot the heading. If you want to add a heading. Better profile. Something like that. Now let's test this out. We can go to app.js and actually we don't need to test it out. We can just go straight to the routes and add this route. So we're gonna add a new route here under products. We're gonna say let me type it route. What's the path? Slash product. Slash. Oops. How do we define parameters? Oh that's easy. Just put a colon. Product ID. If you define this. Say product ID preceded by colon. React route is gonna know. Oh you're talking about URL parameters. So I'm gonna take this as a URL parameter. That could be anything. Okay anything. What the component is. Product profile. And let's import it. Import product profile from same thing. Okay so now that we have that. Let's try it out. In the browser. See nothing happened. Let's try it out. Slash products. Slash three. You can see now see product profile page here. And we added a URL parameter three. Okay and it worked just fine. If I remove the three what happens? Oh it goes back to products because there's no longer anything here. So it's going to the products page slash products. Now I said before that the URL parameter could be anything. So if I say whatever it's gonna go to product profile. So be careful of that. Alright. Now we want to be able to show this ID here in place of this x, y, z. So to be able to access it we're gonna use the parameters object that is injected by react router into our component. So let's let's have a look. Let's go back here to product profile. Let's go back to product profile. And right here we have x, y, z. Let's substitute that with the value from a variable. So we're gonna say props dot prams. This is the object that holds those URL parameters. Okay. We're gonna say product ID because we define it in the route to be product ID. Let's save it and see what we get. You can see it already changed here. If I change to 9876 it changed here automatically. So that's how we access the URL parameter using react router. We're going to use always this parameters object. It's injected by react router. Okay. By the way if you want to know what props are injected by react router it's simple. Go to your app.js. Now here before you return something from the render method just do a console log of all the props that you have. So let's take a look at what props are injected into our app component. Do a console log of this prop. And let's have a look. Here's the console and you can see the many props that are injected but particularly we saw that prams is injected by react router and it's passed on to the children this case product profile. You can see right here product ID. You notice it's a string because it's on the URL parameter which is a string itself. So be careful when you work with numbers and you need them to be integers or whatever make sure to parse into this guy. And there are other things injected by react router. There's the router object here. You can see routes and other stuff route parameters whatever location. This is what's going to be very useful later on. You see query here. That's what I'm talking about. We're going to talk about that later. Okay. So that's how you see what it properties properties are injected by react router. Now we're coming to the end of the lecture just to review again. We're we added this new prop to see the profile page and we added a pram to the URL route so it can be anything here and it's going to show up at props.params. whatever you call in this case product ID. Okay. Inside the product profile. So with that we are able to access that value using props pram.product ID. Okay. Thank you so much for watching. Please like the video and subscribe for not already my subscriber. I appreciate it. Thank you very much for watching and until the next time. Bye.