How to create multiple pages in your React app

Upon creating a react app it is pretty common to want to be able to separate certain features. While it is nice and fairly intuitive to add different components into one page I feel it is a little more robust to be able to go from one page to another. I feel as if it gives the app or site the illusion of depth.

Step 1 : Creating different components

It may seem self explanatory but the first step to creating a multiple page app is creating the different components. You create these components the same as you would if you were to be making something that would be added to the main page. Think, if you wanted a sign in form but you wanted it to be on its own page. In my case I had an app that would function one way when a user first visited the page but after logging in it would add some functionality to that user, so I wanted to create the two user pages as well as a sign in page, and sign up page. As you can see I created all of the components but most importantly created a folder of different pages to plug the components into.

From creating the different pages I am able to add the different containers and components to each creating unique pages.

Step 2: Importing React Router

Once you have the pieces of the puzzle that you want to assemble it is time to import React Router. First you must install react router as it is a routing library built on top of react. Do so by typing the following into the command line.

$ npm install react-router-dom

Next at the top of your app pages that you wish to use the router in you must import like so

Here I am using browser router. It allows you to create a link that directs the user to a page you’ve created it. It does so by creating a custom href to render link to the corresponding route.

You begin by creating a router container within your functional or class component. From there you want to add the route that will be displayed in the address bar in this case let’s say “localhost3000/login” You declare the route path as “/login” and then you declare what component you want to render. In my example it would be the “MainPage” in response to the “/” path or the default address. You can also include props to pass down as well.

You may also want to add in a switch container in order to only allow one route to display at a time.

Within your app code it may look something like this

From there the routes should appear on your page as active links to whatever pages you’ve assigned and created for them.