We're live-coding on Twitch! Join us!

Route Params

Now we need to explore how to handle route params. Route parameters are parts of the URL that will change based on the object we want to display. For example, if we wanted to view information on user #1, we would visit the path /users/1. However, if we want to view information on user #2, we would visit /users/2. That last part of the URL is the parameter. With react-router-dom, we designate a dynamic portion of the URL to be matched by putting a colon (:) before it. Let's explore this by adding a modal that will display a user's information when we click on it.

In src/fe/components/Cms/index.js, import the UserInfo component.

import UserInfo from '../UserInfo';

Next we need to add a route for it to display at /users/:userId. Notice how this path has a route param called userId. We will see in a little bit that we will have access to this variable in our route. Let's add the route. Add this below our other route.

<Route path="/users/:userId" component={UserInfo} />

Go to localhost:3000/users/4 in the browser. You should see our modal. Notice how you can also see our users table in the background. This is because technically both those routes match. So both are shown.

If you try some other numbers for userId, you will notice that the information being shown never changes. This is because I have hardcoded the ID value that is being queried from the API in UserInfo. We need to get access to the dynamic userId being passed into our route and use it to query the correct user from the API. This is easy to do using react-router-dom. The library passes in a prop called match into every route that is rendered. Inside this match object is another object called params. This holds all matching params where the key is the name we specified when creating the route and the value is the actual value in the URL. Let's update the componentDidMount method in the UserInfo component to use our route param.

componentDidMount() {
  const { match: { params } } = this.props;

    .then(({ data: user }) => {
      console.log('user', user);

      this.setState({ user });

Here we have pulled the params object out of the match object that is inside this.props and then used the userId value in the params object to dynamically grab the correct user based on what is in the URL. Try changing the URL to another number and see how it shows the correct information. Let's update the handleDelete method in the same way.

handleDelete() {
  const { match: { params } } = this.props;

    .then(() => {
      console.log('user deleted');

Now that this is working correctly, let's figure out how to remove this modal when we click the "Close" button. This is pretty simple. All we need to do is wrap the button in a Link and have it point to our /users route. Import Link and wrap the button in src/fe/components/UserInfo.js like so.

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


<Link to="/users">

Try clicking on the "Close" button now. It updates the URL. Now that the URL no longer matches the route that shows the modal, the modal goes away. If you click the "Back" button in the browser, you will see that it moves the URL back to the previous one you had been viewing. Since this one matches the modal-showing route, it pops back up again.

There's one last thing we need to do. We need to make it so that when we click on a user in the table, it pops the modal up by switching to that route. I think we all know where this is going. We do this by wrapping each user's name in a Link component.

In src/fe/components/Users.js, update the map function that creates each table row to wrap the first cell of each row in the Link component. Don't forget to import it at the top!

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

{users.slice(startIndex, startIndex + TOTAL_PER_PAGE).map(user => (
  <Table.Row key={user.id}>
      <Link to={`/users/${user.id}`}>{user.name}</Link>

Now try clicking on one of the users' names and notice how the modal pops up. Clicking "Close" will then get rid of it. Awesome!

If you were to click on the "Delete" button, you will notice that nothing seems to happen. If you close the modal and look for the user, however, you will see it has disappeared. The user is being deleted, but the modal isn't being closed. Since we need something done before we close the modal, we need to trigger the URL change ourselves. Luckily, React Router makes this easy by exposing the browser history functionality to us through a prop passed into each route. We will tackle this in the next video.