How to Add Another Static Page in a React App

by
PinLinkedIn

When working with a React application, there is often a need to create multiple static pages, such as an About page, a Contact page, or a Privacy Policy page. Unlike dynamic pages that fetch data from APIs, static pages contain predefined content that remains the same regardless of user interaction.

Adding another static page to a React app is a straightforward process that involves creating a new component and defining a route for it. This article guides through the steps required to add a new static page efficiently.

Step 1: Create a New Component

The first step in adding a static page is to create a new component that will contain the content of the page. In the src directory, create a new folder for static pages if one does not already exist. Then, create a new component file inside this folder.

For example, to add an About page, create a new file named About.js inside the src/pages directory. The component can be defined as follows:

import React from 'react';

const About = () => {
    return (
        <div>
            <h1>About Us</h1>
            <p>This is the About page of our application.</p>
        </div>
    );
};

export default About;

This simple component contains an h1 header and a paragraph, but it can later be expanded with more content.

Step 2: Define a Route for the New Page

Once the component has been created, the next step is to define a route for it. Routing in React applications is typically handled with React Router. If React Router is not already installed, it can be added using:

npm install react-router-dom

In the main file where routing is managed, such as App.js or Routes.js, import the new component and add a corresponding route inside the Routes component:

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

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
            </Routes>
        </Router>
    );
}

export default App;

Here, the About component is assigned to /about, allowing users to visit the page by navigating to http://localhost:3000/about.

Step 3: Add a Navigation Link

To allow users to access the new static page, a navigation link should be added to the application. React Router provides the Link component, which should be used instead of a regular anchor tag to prevent full-page reloads.

Modify the navigation menu, typically found in a Navbar.js component or inside the App.js file:

import React from 'react';
import { Link } from 'react-router-dom';

const Navbar = () => {
    return (
        <nav>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
            </ul>
        </nav>
    );
};

export default Navbar;

The new About page is now accessible from the navigation.

Step 4: Apply Styling

To enhance the appearance of the new static page, CSS can be added either in an external CSS file or a CSS module. For example, an About.css file can be created:

.about-container {
    padding: 20px;
    font-family: Arial, sans-serif;
}

Then, import and apply it in the About component:

import React from 'react';
import './About.css';

const About = () => {
    return (
        <div className="about-container">
            <h1>About Us</h1>
            <p>Learn more about our company and services.</p>
        </div>
    );
};

export default About;

This makes it easier to manage styles efficiently across static pages.

Conclusion

Adding a new static page to a React app is a simple process that involves creating a component, setting up a route, adding navigation links, and optionally applying styling. By following these steps, additional static pages like a FAQ or Terms of Service page can be created without difficulty.

Frequently Asked Questions

Can static pages in React contain dynamic content?

Yes, static pages in React can include dynamic elements like state-based changes or fetched data, but their primary structure remains predefined.

What is the difference between a static and a dynamic page in React?

Static pages mainly contain fixed content, while dynamic pages interact with APIs or user input to modify displayed data dynamically.

Do I need React Router to create a static page?

Yes, React Router provides a structured way to navigate between different pages in a React application.

How can I test my new static page?

Run your app using npm start or yarn start and navigate to the specified route in the browser.

Can I add a static page without modifying App.js?

Yes, by defining routes in a separate routing file and importing it into App.js, modifications to App.js can be minimized.

PinLinkedIn