Adding parameters to our routes

For this recipe, we are going to use the same code as the last recipe, and we are going to add some parameters and show how to get them into our components.

How to do it...

In this recipe, we are going to create a simple Notes component to display all our notes when we visit the /notes route, but we will show one note when the user visits /notes/:noteId (we will filter the note using noteId):

1. We need to create a new component called Notes (src/components/Notes/index.jsx), and this is the skeleton of our Notes component:

import React, { Component } from 'react';
import './Notes.css';
class Notes extends Component {
constructor() {
super();

// For now we are going to add our notes to our 
        // local state, but normally this should come
        // from some service.
        this.state = {
notes: [
            {
id: 1,
title: 'My note 1'
            },
            {
id: 2,
title: 'My note 2'
            },
            {
id: 3,
title: 'My note 3'
          ...