Adding parameters to the routes

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

For this example, we will create a Contacts component to display a list of contacts when we visit the /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 the following skeleton: const Contacts = () => (

<div className="Contacts">
  <h1>Contacts</h1>
</div>
)
export default Contacts

Let’s use these CSS styles:

.Contacts ul {
  list-style: none;
  margin: 0;
  margin-bottom: 20px;
  padding: 0;
}
.Contacts ul li {
  padding: 10px;
}
.Contacts a {
  color: #555;
  text-decoration: none;
}
.Contacts a:hover {
  color: #ccc;
  text-decoration: none;
}

...