React Router

In this tutorial, we learn to use the React Router to configure and set up navigation among various pages in a React application. At the end of this tutorial, you will be able to:

• Install and configure your application to use React Router
• Configure the routes for React router to enable you to navigate to various pages within your React application

Installing and Configuring React Router

• First install React Router into your project by typing the following at the prompt:
$ npm install react-router-dom --save

• Then, open App.js and update it as follows:

Add a Home Component

• Create a new file named HomeComponent.js in the components folder and add the following to it:

Configuring the Router

• Open MainComponent.js file and update it as follows:

• Open HeaderComponent.js and update its contents with the following:

• Then, open FooterComponent.js and update it as follows:

• Open MenuComponent.js and remove the onClick() from the Card in the RenderMenuItem() function

(source: Front-End Web Development with React on Coursera)