React Design Patterns and Best Practices - Second Edition

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. ...