A React app consists of a single HTML file index.html. The views are coded in JSX format as components.

But we sometimes need to build multi-page websites because a single-page website can not always represent complete information.

Note:- I like to add a point to this article that, we can actually integrate React in a multi-page web application by developing a Webpack configuration that includes React components into a generated static pages (i.e. HTML files). If you are interested to do it, then follow the article Multi-Page Application with React. But now, we are dealing with routes.

Here we are going to build a website with multiple routes instead of multiple pages. Because React is not designed to develop multi-page websites. So, we need to create multiple routes to handle multiple views.

The routes of the app and its corresponding view are described below.

The below GIF will make you understand the exact idea about the view and working of this app.

Video tutorial

If you would like to follow a video guide, the below youtube link will help you to cover up the entire steps in less than 4 minutes.

Create a React application

First, we need to create a react application using the NPX tool. Don’t worry about NPX, because it’s a tool coming with NPM(Node Package Manager) 5.2+ onwards.

So, after a successful installation of Node.js, create a React application using NPX.

npx create-react-app react-multi-page-website

This command will create a react application with the project name react-multi-page-website.

Now enter the project directory and start the app.

cd react-multi-page-website

npm start

It will open up the React application we have created in our browser window with the address https://localhost:3000. The port may vary if 3000 is busy.

If you need further assistance in the installation of React on your system, use the below links.

Install React on Windows, Ubuntu, and macOS