How to Build Multple pages website using react js i have not idea

I am new to react js and I want to learn how to create multiple pages websites in React js here is a sample design I want to make: please guide me

Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Site Moderator
Site Moderator badge
December 29, 2023


Creating a multi-page website in React typically involves using a routing library like React Router. React Router enables you to define multiple routes in your application, each corresponding to a different view or page. Here’s a basic guide on how to get started with a multi-page React application:

1. Set Up Your React Project

If you haven’t already created a React app, you can start one using Create React App:

npx create-react-app my-app
cd my-app
npm start

This command creates a new React application and starts the development server.

2. Install React Router

React Router is not included in the default React setup, so you need to add it to your project:

npm install react-router-dom

3. Create Your Pages (Components)

In React, pages are typically represented as components. For a simple multi-page app, you might have a few components like Home, About, Contact, etc. Create these components in your project. For example:

// Home.js
function Home() {
  return <h1>Home Page</h1>;

export default Home;

// About.js
function About() {
  return <h1>About Page</h1>;

export default About;

// ... similarly for other pages

4. Set Up Routing

In your App.js, import the components and set up routing using BrowserRouter and Routes from react-router-dom:

import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Home from './Home';
import About from './About';
// ... import other pages

function App() {
  return (
              <Link to="/">Home</Link>
              <Link to="/about">About</Link>
            {/* ... other links */}

        {/* A <Routes> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          {/* ... other routes */}

export default App;

5. Start the Development Server

If you haven’t already, start your development server:

npm start

Your application should now be running on http://localhost:3000, and you should be able to navigate between your pages using the links.

6. Explore Further

As you get more comfortable with React and React Router, you can explore more advanced topics, such as dynamic routing, nested routes, route guards, and handling 404 pages.

Resources for Learning

  • React Documentation: The official React documentation ( is a great resource for learning React.
  • React Router Documentation: The official documentation for React Router ( provides in-depth guides and examples.
  • Online Tutorials and Courses: Websites like freeCodeCamp, Codecademy, and Udemy offer tutorials and courses on React and React Router.
  • YouTube Channels: Many YouTube channels provide free tutorials on React and related technologies.

Remember, building a multi-page React app can seem daunting at first, but with practice, it becomes much more manageable. Happy coding!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel