So right here by the end of this guide, I wanna be able to click on one of these titles and be taken to that blog detail component. So let's get started, I'm gonna start by defining the route. So let's open up the main app component and then if you scroll up all the way to the top right below where it says "blog".

And you could put this anywhere, but I just like to put it in a spot that is closely aligned here because whenever I wanna come back and look at this, if maybe I wanna make a change to the name, I can tell that all of my blog components are all in the same spot.

So I'm gonna say import BlogDetail from and this in the same location. We haven't created this file yet, but we're just doing this as a preliminary step. So I'm gonna say it's in pages and then the file name is gonna be blog-detail.

app.js

import BlogDetail from "./pages/blog-detail";

So now that we have imported this, even though it doesn't exist yet, we're gonna come down here and create the route. So inside of the route definition here, I want this to be publicly available so we're not gonna list it inside of our authorized pages function or anything like that. And so I'm going to duplicate this path, but now I'm gonna make a slight change.

I don't want the URL to be something like this so I'll make a comment here. I don't want it to be blog and then the ID specifically. What I would rather have is it to just say something like b dash and then whatever the ID is, just to make it a little bit shorter and easier to read and also to show that you can use the routes however you want from a custom perspective.

So here what I can say the path is gonna be is b/ and then I'll put slug and so this is going to be the route parameter that we can access and then here for blog, I'll say BlogDetail and that's gonna give us what we need.

Now if you save it now it's gonna throw an error because we do not have this file yet, we don't have this BlogDetail component, so let's go and let's create an empty component right now. So if you go into your pages directory, create a new file and call it blog-detail.js and inside of here let's just create an empty class component.

So I'm gonna use my snippet here and so I'm gonna call this BlogDetail and for right now let me just put an h1 tag and inside of it we'll just say this is the blog detail component. Okay, so now this saved and now it should compile successfully for you.

blog-detail.js

import React, { Component } from "react";

export default class BlogDetail extends Component {
  render() {
    return (
      <div>
        <h1>Blog detail</h1>
      </div>
    );
  }
}

So now we have the route and we can go take a look at it. It's not really gonna be very much to see, but if you go to b/ and something like 123 you can see that this route is available.

So how can we connect this and link directly from our blog page? Well, we're going to open up our blog item component for this. So if you come all the way up here to the top, what we wanna do is we need to import the link tag so I'm gonna say import inside of curly braces, Link from react-router-dom and so now we have access to the link.

import { Link } from 'react-router-dom';

Now we can make this title an actual link component, so I'll say Link to equals and now we need to make this dynamic so we're gonna put it in curly brackets and I'm also going to use a string literal notation so make sure you're using your backticks and from here I'll say /b/ and then using string interpolation $ with a curly bracket and then give the ID and then make sure to close off that link tag and then to close off the entire link block like this.

return (
  <div>
    <Link to={'/b/${id}'}>
      <h1>{title}</h1>
    </Link>
    <div>{content}</div>
  </div>
);

So what this should do is give us a link to our b route with a dynamic ID right here. So let me just come over here and now let's see, we're going to open this up, and you can see that we do have a functional link right here.

So we are being able to call the b tag and it's going right to the blog detail page and it's putting in the dynamic ID. In the next guide, we're gonna see how we can grab this ID and be able to use it inside of our component.

Resources

• Source code