Implementing routes

As mentioned before, after defining the NavLinks and where they should get us on click, we need to define what is going to be depicted for every route accordingly. 

To make a long story short, the NavLink, changes the url location, the BrowserRouter finds the corresponding route for this url location based on the path attribute of the component.

In our case when the first link is clicked we show (via the render method) the component (don’t worry about the parameters inside the  arrow function for now).

When the second link is clicked (we navigate to the /show) we bring to life the component. You can also use the component attribute instead of the render, in case you don't want to show JSX elements, but a whole component.

Although here we need to pass also some props inside every component, and we use the render method, that accepts an arrow function. This function then renders the component or pure JSX if you want.

Attention: Pay attention to the exact keyword inside a Route component. If exact is there, that means that the to attribute of a NavLink must match exactly the path attribute of the Route component. If the keyword is not there, then a partial match is possible. (ex.

path = '/home' will also be executed even when the to = '/home/somethingElse' due to partial match.)