Adding parameters to the routes

So far, you have learned how to use React Router for basic routes (one-level routes). Now, I will show you how to add some parameters to the routes and get them into our components.

For this example, we will create a Contacts component to display a list of contacts when we visit /contacts route, but we will show the contact information (name, phone, and email) when the user visits /contacts/:contactId.

The first thing we need to do is to create our Contacts component. Let's use this skeleton:

  import React, { Component } from 'react';
  import './Contacts.css';

  class Contacts extends Component {
    // For now we are going to add our contacts to our
    // local state, but normally this should come
    // from some service.
    state = {
      contacts: [
        {
          id: 1,
          name: 'Carlos Santana',
  ...