The render() method of the WineMakers component implements the resulting view as follows:

render() {
  return <Switch>
    <Route exact path='/winemakers' render={this.renderWineMakersList}/>
    <Route path='/winemakers/WM1' render={() => (<WineMaker code='WM1' />}/>
    <Route path='/winemakers/WM2' render={() => (<WineMaker code='WM2' />}/>
  </Switch>;
}

This code is straightforward, and it works, but it forces us to add a new route whenever a new winemaker is added to our list.

We can avoid this by using path parameters, as in the following code:

render() {
  return <Switch>
    <Route exact path='/winemakers' render={this.renderWineMakersList}/>
    <Route path='/winemakers/:code' component={WineMaker}/>
  </Switch>;
}

As you can see, we can now use a single route pointing to a specific winemaker by specifying a :code parameter. The colon in the path expression indicates that the following portion of the URL is a variable value. You may also notice that we used the component attribute instead of the render attribute. In fact, in this case, we do not need to explicitly pass the winemaker's code to the WineMaker component. React Router does it for us, by providing a special object in the props property.

Let's take a look at the WineMaker component implementation:

import React from 'react';

class WineMaker extends React.Component {
  constructor() {
    super();
    this.wineMakers = [
      {code: "WM1", name: "Wine & Wine", country: "Italy",
      description:"Wine & Wine produces an excellent Italian wine..."},

export default WineMaker;

In the component's constructor, we define the list of winemakers as an array of objects.

In the render() method, we look for the winemaker to display by comparing the code property of each winemaker object in the array with the match.params.code property provided by this.props.

The object we find is used to appropriately render the data about the WineMaker.

Generally, a React component reached via a route receives the match object in the this.props property. This object contains information about the matching path in the Route definition. In particular, the following properties of the match object are available:

• params: This is an object whose properties match the parameters in the path; that is, the dynamic parts, preceded by colons
• isExact: This is a Boolean indicating that the URL matches the path
• path: This is the string assigned to the path attribute of the selected route
• url: This is the URL that matches the route's path

We can see the final result by performing the following steps. We open the existing project, my-shop-05, in order to show the results of the previous code:

1. Open a console window
2. Move to the my-shop-05 folder
3. Run npm install
4. Run npm start