This is gonna be something that is very common as you're building out applications, so let's take for example if we have a portfolio detail page, which we are going to have. If I click on one of these links, and we're gonna turn each one of these titles into a link, what I wanna do is be taken to a portfolio detail page and on that page I want to have more information about that particular portfolio item.

So how can we do that? Because we need to pass data between one of the elements and another, and we definitely could use props for that, that would be one way of doing it, but that doesn't really satisfy all of the use cases. So take for example Quip right here, if I want to send a link to somebody and say, here is an example of an application I built.

If I do not have an actual URL, so what I wanna have is up here in the URL bar is something that would say portfolio/quip, and then I can send anybody a link to that specific URL, and then they could go and access the details for that portfolio item. If I simply pass props back and forth, I wouldn't be able to do that, and so that is the reason why using this kind of approach is really good in certain circumstances.

So let's see how we can work with that, and I'm also going to reset our route here, just so we can make sure we're working with a fresh copy of the application, and now lets switch back into visual studio code, and I'm gonna add a new route here at the bottom, and the path to this is gonna look a little different.

I'm gonna say portfolio, just like we talked about and slash, and now I'm gonna start with a colon and I'm gonna say slug, and this is the common naming convention for any type of custom URL endpoint. So because I want it to say Quip or Eventbrite or anything like that, using the name slug which is one of the common conventions, another one that's pretty popular as well is permalink, but I'm gonna go with slug and then I'm also going to add a new item.

This is gonna be called just PortfolioDetail, that's gonna be the name of this particular component, and now let's come up to the top here, and let's create it, so I'm going to say PortfolioDetail. This is going to be in the pages directory as well, and I'm gonna call it portfolio-detail, so now let's actually go and create it.

So inside of portfolio or actually, oh that's a good this brings up a good question. It is gonna be a page, but it is specifically a portfolio page, it's a portfolio component. So I think it's gonna be a better idea from a code organization perspective to put it in the portfolio directory, and this also brings up the topic of the flexibility that React gives to you.

We could use either one of these options and one isn't particularly better than the other, so this allows you, React allows you, to work with this kind of approach. I think I'm gonna put it in the portfolio directory, so I'm gonna create a new file here called portfolio-detail.js and then let's also go and update our import statement, so it should be pulled from portfolio, and now let's create a functional component, so I'm gonna say rf for my little user snippet and then we'll, inside of a h2 tag, I'm gonna say Portfolio Detail, just so we know that we're on the right page, hit save.

Now if I go back to the browser, I can hit refresh. Obviously, we don't have a Navlink here or anything, and we haven't added links on the page yet, so we have to hard code it, so I'm gonna say portfolio/quip, hit return, and you can see that worked.

So everything is working properly here, so that's good, but how do we get access to the data? I wanna know what URL we're on, and this is gonna come in very handy when we start contacting the API, because the API that's gonna bring us our live data from the server is going to have to know what data to bring back, so are we gonna bring back Quip? Eventbrite? Are we gonna bring back ministry safe? It needs to know, and this slug is going to be the key.

So let's see how we can access that and I can give you a hint, the secret here is in the props object, so when we bring in props, so you can bring props right in to this functional component, we have access to the URL, so let's come right down below this h2 or actually you can put it in here, you can say Portfolio Detail for and in curly brackets say props.match.params.slug, hit save, and now you can see it says Portfolio Detail for quip, so this is working perfectly, we now have access to the URL data.

If I were to say Eventbrite, now it says eventbrite. So everything here is working perfectly.

Now this is only really half of the solution though, because technically as good as this is, we don't want to have our users hard coding these values in, we want to link to those pages, so let's go and let's add links directly in our portfolio containers. I'm gonna close out each one of these files and open up the portfolio-container.js here and you can see, let's see here are our portfolio items, and we're going to add some more data here.

You can see we have a title and a category, but we now need a slug, and just to give you a little bit of a hint on why I'm doing this, why I keep on adding to this data state object is because this is going to almost perfectly mimic the data we're gonna be getting from the API, so we're not gonna have to make a ton of changes when we start pulling in our real time data, instead, we're simply going to swap out how we're accessing it, so instead of getting it directly from state, we're gonna be calling the API.

So let's get our slugs here, so we have a slug for Quip, a slug for Eventbrite, a slug for ministry-safe, and one key here with any slug, an API's gonna do this for us automatically, but any time that you're working with slugs, you can't have any spaces or anything like that, so you wouldn't say ministry space safe, it has to be a dash or an underscore, and you also wouldn't do something like another backslash, because that could interfere with some routes.

So we're going to do that, and then one last one will be slug and Swingaway, so those are each one of our data items, they've now been updated, and so that means that we have access to them and we can use them inside of our portfolio item, so let's kinda traverse the tree and see the best place to add each one of those.

So we have this PortfolioItem component, we're passing it a title and a URL, and so we can also add in a slug, and later on, I'm gonna show you how we can refactor this and how we can pass in only a single item and then access the data we want from there, but for right now, let's just do it this way just so we can be a little more explicit so I'll add one more prop here and let's call this just slug and then we're gonna be passing in item.slug, hit save and now let's open up portfolio-item.js.

Instead of just adding another heading here, now I want to grab a link. So if you remember how to grab a link, we start off by importing it, so I'm gonna import link from React-router-dom, and then down here I'm going to say link to and now this is where we need to call the exact route, so I'll say slash portfolio slash, and now we need to use some string interpellation, so I'm gonna switch, so instead of using the double quotation marks, I'm gonna use this back tick(`), and I haven't used this so far in the course, but if you're curious, the back tick allows you to do a more modern version of string interpellation.

It is the character on the keyboard right at the top left, should be right below your escape bar right above your tab bar, and that's going to allow us to access this string value, and inside of here I can say dollar curly bracket and then we're gonna go with props.match... or actually, oh yeah, there's a couple ways we could do that.

So we could get it from pops and then slug, just like this, and let's see, let's back tick and inside of here I'm just going to put, I'm just gonna say link, you could put anything that you want here, but let's see what we have going on and if you noticed we have a little error and that's a reason, the reason for this is because this is javascript code, so we need to wrap this up inside of our curly brackets, there we go, this will get it fixed. Okay, now if you hit save this should work.

So we wrote a decent amount of code, so let's actually make sure I don't have any bugs here. I'm passing in and I'm using string interpellation to have this route to portfolio slash slug, I'm getting that from props, I'm passing in the slug from the item and I believe everything there should be good, so let's go test it out. Let's hit refresh, it looks like everything's good.

We have these links here now, if I click on Ministry Safe there we go, it takes us to Ministry Safe, Swingaway takes us to Swingaway, so we now have fully functional links and we're grabbing the slugs and so now if you imagine that scenario I told you in the very beginning where we wanted to be able to share a link with someone. So say you're sending out your resume and you want to share a link to a specific company or project that you worked with, then now you actually have the ability to do that, if I click on Quip it takes me right to the correct portfolio item.

So let's do a quick review on everything that's going on there, because I know this is quite a bit if you've never worked with dynamic routing like this, this might be a little confusing, so let's just review and make sure we have it all. We added a slug here, now we passed the slug directly into our portfolio item component so that we were able to create dynamic links, so we grabbed the portfolio item and then passed in the slug via props, and now if you click on it and you can use the inspector and check out what these links say.

You can see that this one says portfolio/quip, that is what got generated for us and if you look down at any of the other divs, you can see the next one says portfolio slash Eventbrite, so that's how we're dynamically generating those links in order to work with the slug, and then one of the most important items here is inside of our portfolio detail, and that is where we have access via props to the match object, the params object, and then finally the slug.

Now one thing I will mention, I never get the order of these right, so don't feel like you have to have that memorized. I always look back either at the documentation or I look back at a previous project where I needed to grab the slug and I go back and I grab it that way, so don't feel like you have to memorize that, and that really goes for many of the things that you're gonna see here.

It is very common for me as I'm building out applications to go back and reference either other tutorials that I've gone through, tutorials I've created, or previous projects, because usually I'll be able to reuse a lot of the features and functionality that I've built in previous either courses or previous projects and none of us have the ability to memorize each one of these elements.

So don't feel bad if you're feeling you're having to copy and paste a lot or if you're having to go back and look at the notes, the show notes, or even some of your own, previous projects, because that is something you'll do no matter how long you're a developer, and the very best developers in the world do that as well.

So great job if you went through that, you now know how to create dynamic links and access that link data in React.

Resources

• Source Code