How to create a multi-page website using React.js ?

06 Jan, 2022
In this article, we will see how to create a simple multipage website using React Js.
Prerequisite:
npmcreate-react-appreact-router-domstyled components
npm
create-react-app
react-router-dom
styled components
Approach: We will create a simple website that will have different pages and a navbar. We will create multiple pages Home page, About page, Blog page, Signup page, and Contact page and then we will see how to navigate between those pages. We will be using the following packages and components:
react-router-dom: react-router-dom is a reactJS package, It enables you to implement dynamic routing in a web page.
BrowserRouter: It uses the HTML5 history API to keep the UI in sync with the URL.
Route: Its responsibility is to render UI when its path matches the current URL.
Switch: It renders the first child Route or Redirects that matches the location.
Styled-components: Styled-component Module allows us to write CSS within JavaScript in a very modular and reusable way in React.
Below is the step by step implementation:
Step 1: We will start a new project using create-react-app so open your terminal and type:
Chapters
descriptions off, selected
captions settings, opens captions settings dialog
captions off, selected
English
default, selected
This is a modal window.
Beginning of dialog window. Escape will cancel and close the window.
End of dialog window.
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 install react-router-dom 
npm install --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 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: The project structure will look like the following:
Step 5: Now we will create the navbar and style it.
index.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;
 
NavbarElements.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;  }`;
Step 6: Now we will edit various pages in the project in src/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;
blogs.js
import React from 'react';  const Blogs = () => {  return (    <h1>You can write your blogs!</h1>  );};  export default Blogs;
index.js
import React from 'react';  const Home = () => {  return (    <div>      <h1>Welcome to GeeksforGeeks</h1>    </div>  );};  export default Home;
signup.js
import React from 'react';  const SignUp = () => {  return (    <div>      <h1>Sign Up Successful</h1>    </div>  );};  export default SignUp;
contact.js
import React from 'react';  const Contact = () => {  return (    <div>      <h1>Mail us on feedback@geeksforgeeks.org</h1>    </div>  );};  export default Contact;
index.js
import React from 'react';import ReactDOM from 'react-dom';import App from './App';  ReactDOM.render(<React.StrictMode>    <App /></React.StrictMode>,document.getElementById('root'));
App.js
import React from 'react';import './App.css';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='/' exact 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;
Step to run the application: Now to run the above code open the terminal and type the following command.
npm start
Output:
rkbhola5
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Axios in React: A Guide for Beginners
ReactJS setState()
How to pass data from one component to other component in ReactJS ?
Re-rendering Components in ReactJS
ReactJS defaultProps
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Differences between Functional Components and Class Components in React