How to Create Pages and Set Up Routes in a React App

One of the most useful benefits of single-page frameworks like React is the ability to hot load new pages and data on the fly. So, let’s learn how to create new React application pages and routes. 

This article assumes that you have experience writing JavaScript and HTML. Likewise, we’ll assume you followed a few React tutorials before landing on this page. This article is a high-level React router tutorial. 

If you need a full-blown React app tutorial, check out Shaun Wassell’s Full Stack React App online training course instead. His MERN stack course explains the entire process of planning, building, and deploying a React app built on the MERN stack. 

An Overview of Creating Pages and Setting Up Routes in React

In this video, Wassell goes over the basics of how to create pages and then set up routes using React.

How to Create New Pages in React

It’s super easy to create new pages in React. First, you’ll want to create a new folder in the root directory of your React app called ‘pages.’ It’s essential to keep things organized. With that said, let’s touch on a couple of typical React app patterns quickly. 

How to Organize a React App

Never create new pages and files in the root directory of your React app. Instead, create specifically named folders for each ‘thing’ in the app. For instance, create a folder called ‘pages’ for all the React app pages, and another called ‘components’ for reusable objects like cards or forms, etc. 

Always name files with a descriptor to explain what it handles and the type of thing it is. For example, if the file is a notes page, name the file NotesPage.js. Likewise, always use CamelCasing in filenames. 

Creating a Page in React

After making a new folder called ‘pages’ in the root of your React app, create a new file for each page required for your app. For instance, a notes page for a to-do app might be called NotesPage.js. Your folder and file structure should look like this:

We’re not done. Each page needs the React bits added that define the page itself. Open one of the React pages you just created. On that page, add an export statement for a const that returns the React fragment for the page. It should look like this:

Don’t forget to wrap the JSX inside the return statement in a React fragment (<> or <div>). React only allows one top-level element to be returned per component. 

Hazzah! Your basic React app pages are ready to go. 

How to Create Routes in a React App

There isn’t any point in creating pages in React without being able to navigate to them. We’ll need routes in our React app to do that. So, let’s create routes for the pages you just made. 

Create the Routes.js File

Create a new file called Routes.js in the root folder in your React app. Routes can be placed directly in the App.js file in your React app, but that isn’t good practice. Get in the habit of separating routes in their own file as soon as possible. 

After creating the Route.js page, ensure the React Router is installed by using the command ‘npm install react-router-dom’ in the CLI from the root of your React app. 

Once installed, import the React router components into the Router.js file:

Import {BrowserRouter as Router, Switch, Route } from ‘react-router-dom’;

Also, import each page of your React app into the Router.js file too:

Import {userPage} from ‘./pages/userPage’;

Define the React App Page Routes

Now that the React Router is usable and the pages are defined, create the export statement that defines your routes. The return statement must encapsulate all routes in the <Router> tag. 

Likewise, each route should be encapsulated in the <Switch> tag to ensure that only one page is visible at a time. In each <Switch> tag, include <Route> tags that define a URL endpoint and the page it opens for each of your React app pages. 

Your final Routes.js file will look like this:

Finally, open the App.js file, import the Routes.js file, and add the <Routes /> component to the root of the return statement of the App component. The App.js file in your React app will look like this:

When you’re ready to take your React app for a spin and test the React page routes, launch your React app with the ‘npm run start’ command in the CLI from the root of your React app. When the browser opens, try navigating to each React route defined in your Routes.js file. 

Start Learning to Work With React Today

This article glossed over so many details. It was only meant as a quick React page and route primer, but there is much more to learn. For instance, how do you tell a React page to load specific data when it opens, or how do you style and build a React app page?

CBT Nuggets trainer Shaun Wassell is more than happy to explain all of that. His CBT Nuggets How to Create a Full Stack React App training explains all of the nitty gritty bits required to build a fully functional, production-ready React application.