I know that the title of this post might confuse you if you are familiar with React. Because React deals with components instead of pages. But how can we implement a multi-page website with React?
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.
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.
So we are building a React app with multiple routes and it requires a package react-router-dom. Install it with NPM.
Note:- In the previous step, we have started the app in a terminal tab. So, open another terminal tab/window to run the below command.
npm i react-router-dom
Now we can use our favorite code editor to edit our project. I personally recommend Visual Studio Code.
Add Bootstrap CDN
We are using a bootstrap template to set up our view and it requires a Bootstrap CSS file. We can add bootstrap in our react application multiple ways and here I am using the Bootstrap CDN.
So, open index.html file in public directory and add the bootstrap CDN inside <head></head> section.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
So that the complete index.html file looks like the below.
Building the Components
In this article, we are building 5 components.
- Navigation.jsx and Footer.jsx those are common for all routes.
- Home.jsx, About.jsx and Contact.jsx those are the routes.
First, create components directory inside src. All our components will be coded inside it.
This is the topmost section of our app which deals with the navigation of our routes.
We are using <Link> instead of <a> tag. Clicking each Link will route to the specific path described.
<Link to="/">Home</Link>– The route to the home page that is http://localhost:3000
<Link to="/about">About</Link>– About page route that is, http://localhost:3000/about
<Link to="/contact">Contact</Link>– Route to contact page that is http://localhost:3000/contact
I also added a simple logic in this component to trigger different color active navigation item. In Bootstrap adding a class active will show an active color for that link. In React, props.location.pathname will give the exact path of the current route.
I have combined those two and if the pathname if the current pathname is the same as the route, a class named active is added to the link.
Note:- To get the exact pathname, the component must be wrapped inside withRouter. You can see that I exported the Navigation component wrapped inside withRouter(line 61).
We need a bottom section which is the footer. This section is also common for all routes.
This is the view of the Home page and rendered when the route is “/”.
This is the view of the About page and rendered when the route is “/about”.
This is the view of the Contact page and rendered when the route is “/contact”.
To simplify importing all the components we have developed, we are exporting all components form a single file index.js inside components directory.
Declaring all routes in App.js
So, after creating all the components, we need to import them all to App.js and switch the routes with each corresponding path.
So the complete app we have created looks like below.
Refer to the CodeSandbox link to view the live app.
You can always refer to the GitHub repository to clone this project.
Guys, how about a no-code tool?
I know this is a bit off-topic, but my friends at CodeDesign.app have opened their beta for the public. CodeDesign is a visual code-export tool and I personally loved it so far. If you sign up now, you could get a 1-year subscription worth 100USD. Click here to get started!
So, in this article, we have discussed the steps for creating a multi-page website using React. Actually, it is a multi-component website but works the same as a multi-page. I also included the GitHub repository URL where you get the complete project for reference.
Have a nice code.