How To Create A Multi-Page Website Using ReactJS?
Last Updated :
09 Jan, 2025
Multi-page website using ReactJS is the core for building complex web applications that require multiple views or pages. Previously where each page reloads entirely, ReactJS allows you to navigate between different pages without reloading the whole page thanks to libraries like React Router.
In this article, we will walk you through the steps to build a multi-page website in ReactJS, covering essential concepts, practical examples, and best practices.
Prerequisites
Approach
To create a multi-page website using React follow these steps:
- First, install and import react-router-dom for routing.
- Define the page components like Home, About, Blog, Contact, and SignUp pages with the help of styled components.
- Enclose all pages in the Router and routes component along with their path.
Steps to Create A Multi-Page Website Using ReactJS
Step 1: We will start a new project using create-react-app so open your terminal and type:
npx create-react-app react-website
Step 2: Now go to your folder by typing the given command in the terminal:
cd react-website
Step 3: Install the dependencies required in this project by typing the given command in the terminal.
npm i react-router-dom --save styled-components
Step 4: Now create the components folder in src then go to the components folder and create a new folder name Navbar. In the Navbar folder create two files index,js, and NavbarElements.js. Create one more folder in src name pages and in pages create files name about.js, blogs.js, index.js, signup.js, contact.js
Project Structure:

Dependencies
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.19.0",
"react-scripts": "5.0.1",
"styled-components": "^6.1.1",
"web-vitals": "^2.1.4"
},
Example: This example demonstrate creating a multipage website with navbar using react router dom and styled components.
JavaScript
// Filename - App.js
import React from "react";
import Navbar from "./components/Navbar";
import {
BrowserRouter as Router,
Routes,
Route,
} from "react-router-dom";
import Home from "./pages";
import About from "./pages/about";
import Blogs from "./pages/blogs";
import SignUp from "./pages/signup";
import Contact from "./pages/contact";
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route
path="/contact"
element={<Contact />}
/>
<Route path="/blogs" element={<Blogs />} />
<Route
path="/sign-up"
element={<SignUp />}
/>
</Routes>
</Router>
);
}
export default App;
JavaScript
// Filename - "./components/Navbar.js
import React from "react";
import { Nav, NavLink, NavMenu } from "./NavbarElements";
const Navbar = () => {
return (
<>
<Nav>
<NavMenu>
<NavLink to="/about" activeStyle>
About
</NavLink>
<NavLink to="/contact" activeStyle>
Contact Us
</NavLink>
<NavLink to="/blogs" activeStyle>
Blogs
</NavLink>
<NavLink to="/sign-up" activeStyle>
Sign Up
</NavLink>
</NavMenu>
</Nav>
</>
);
};
export default Navbar;
JavaScript
// Filename - ./components/Navbar.js
import { FaBars } from "react-icons/fa";
import { NavLink as Link } from "react-router-dom";
import styled from "styled-components";
export const Nav = styled.nav`
background: #ffb3ff;
height: 85px;
display: flex;
justify-content: space-between;
padding: 0.2rem calc((100vw - 1000px) / 2);
z-index: 12;
`;
export const NavLink = styled(Link)`
color: #808080;
display: flex;
align-items: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
cursor: pointer;
&.active {
color: #4d4dff;
}
`;
export const Bars = styled(FaBars)`
display: none;
color: #808080;
@media screen and (max-width: 768px) {
display: block;
position: absolute;
top: 0;
right: 0;
transform: translate(-100%, 75%);
font-size: 1.8rem;
cursor: pointer;
}
`;
export const NavMenu = styled.div`
display: flex;
align-items: center;
margin-right: -24px;
/* Second Nav */
/* margin-right: 24px; */
/* Third Nav */
/* width: 100vw;
white-space: nowrap; */
@media screen and (max-width: 768px) {
display: none;
}
`;
JavaScript
// Filename - pages/index.js
import React from "react";
const Home = () => {
return (
<div>
<h1>Welcome to GeeksforGeeks</h1>
</div>
);
};
export default Home;
JavaScript
// Filename - pages/about.js
import React from "react";
const About = () => {
return (
<div>
<h1>
GeeksforGeeks is a Computer Science portal
for geeks.
</h1>
</div>
);
};
export default About;
JavaScript
// Filename - pages/blogs.js
import React from "react";
const Blogs = () => {
return <h1>You can write your blogs!</h1>;
};
export default Blogs;
JavaScript
// Filename - pages/signup.js
import React from "react";
const SignUp = () => {
return (
<div>
<h1>Sign Up Successful</h1>
</div>
);
};
export default SignUp;
JavaScript
// Filename - pages/contact.js
import React from "react";
const Contact = () => {
return (
<div>
<h1>
Mail us on
feedback@geeksforgeeks.org
</h1>
</div>
);
};
export default Contact;
To start the application run the following command.
npm start
Output: This output will be visible on the http://localhost:3000/ on the browser window.
Create A Multi-Page Website Using ReactJS
Similar Reads
How To Create a Website in ReactJS? ReactJS is one of the most popular JavaScript libraries for building user interfaces. It allows you to create dynamic, reusable UI components and efficiently manage state and events. In this article, we'll walk through the steps to create a basic website using ReactJS.PrerequisitesNPM & Node.jsR
5 min read
How to develop a Progressive Web App using ReactJS ? Progressive React Applications respond very fast to user actions. They load fast and are engaging just like a mobile app. They can access Mobile device features, leverage the Operating System, and have a very high reach. It enables Installability, Background Syncing, Caching and Offline Support, and
10 min read
How to Set Up Vite for a Multi-Page Application? Vite is a frontend development tool, used to build projects and multiple page applications in React.js. It is a beginner-friendly user tool that was developed by the founder of Vue.js, another framework of React.js. we will learn how to set up Vite for a Multi-Page Application. Steps to Set Up Vite
5 min read
Create A Real Estate Website Using React and Tailwind CSS A Real Estate Website built with React JS and Tailwind CSS is a modern and responsive web application that is designed to showcase real estate listings. It typically includes features such as OnSale property, a Features section, and a Contact Us section. The website is created using React JS, which
9 min read
Portfolio Website using React Portfolio Website using React is an online representation of the talent and skills one possesses, along with details of past work and contact information. it is very important for any professional.Table of ContentPreview of Portfolio Website using ReactApproach to Create Portfolio Website using Reac
6 min read
How to use Portal Component in ReactJS ? The portal component renders its children into a new subtree outside the current DOM hierarchy. Material UI for React has this component available for us, and it is very easy to integrate. We can use the Portal Component in ReactJS using the following approach.Prerequisites:NodeJS or NPMReact JSMate
2 min read
How to use Pagination Component in ReactJS ? Pagination is a feature through which users can easily switch between pages across a website or app. With the help of this component, a user can select a specific page from a range of pages. Material UI for React has this component available for us, and it is very easy to integrate. We can use the f
2 min read
Create an Agency Website using React and Tailwind An agency website using React and Tailwind consists of basic components such as a home page, services, contact us, features, etc. It also has a contact form that will enable the user to contact if any issue arises on the website or the benefits to be availed by the user through the website. Preview
6 min read
Travel Blog Website using React Creating a Travel Blog Website using React JS is a better way to learn how to manage state, passing props and render data dynamically. In this article, we are going to learn how to create a Travel Blog Website using React JS. This website will have a list of places with images and description. The d
4 min read
Photography Website using React In this project, we're going to design an impressive photography website using React. The website will include a beautiful navbar, an introductory section with both an image and text, a photo gallery with a dynamic grid layout, and a modal to showcase selected photos in detail. Additionally, we'll i
5 min read