{"id":5386,"date":"2025-02-05T16:13:15","date_gmt":"2025-02-05T16:13:15","guid":{"rendered":"https:\/\/unitconversion.io\/blog\/?p=5386"},"modified":"2025-02-05T16:24:23","modified_gmt":"2025-02-05T16:24:23","slug":"how-to-add-another-static-page-in-a-react-app","status":"publish","type":"post","link":"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/","title":{"rendered":"How to Add Another Static Page in a React App"},"content":{"rendered":"

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.<\/p>\n

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.<\/p>\n

Step 1: Create a New Component<\/h2>\n

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<\/i> directory, create a new folder for static pages if one does not already exist. Then, create a new component file inside this folder.<\/p>\n

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

\nimport React from 'react';\n\nconst About = () => {\n    return (\n        <div>\n            <h1>About Us<\/h1>\n            <p>This is the About page of our application.<\/p>\n        <\/div>\n    );\n};\n\nexport default About;\n<\/pre>\n
This simple component contains an h1<\/i> header and a paragraph, but it can later be expanded with more content.<\/p>\n
Step 2: Define a Route for the New Page<\/h2>\n
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<\/b>. If React Router is not already installed, it can be added using:<\/p>\n
\nnpm install react-router-dom\n<\/pre>\n
In the main file where routing is managed, such as App.js<\/i> or Routes.js<\/i>, import the new component and add a corresponding route inside the Routes<\/i> component:<\/p>\n
\nimport React from 'react';\nimport { BrowserRouter as Router, Route, Routes } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\n\nfunction App() {\n    return (\n        <Router>\n            <Routes>\n                <Route path=\"\/\" element={<Home \/>} \/>\n                <Route path=\"\/about\" element={<About \/>} \/>\n            <\/Routes>\n        <\/Router>\n    );\n}\n\nexport default App;\n<\/pre>\n
Here, the About<\/i> component is assigned to \/about<\/i>, allowing users to visit the page by navigating to http:\/\/localhost:3000\/about<\/i>.<\/p>\n\"\"\n
Step 3: Add a Navigation Link<\/h2>\n
To allow users to access the new static page, a navigation link should be added to the application. React Router provides the Link<\/i> component, which should be used instead of a regular anchor tag to prevent full-page reloads.<\/p>\n
Modify the navigation menu, typically found in a Navbar.js<\/i> component or inside the App.js<\/i> file:<\/p>\n
\nimport React from 'react';\nimport { Link } from 'react-router-dom';\n\nconst Navbar = () => {\n    return (\n        <nav>\n            <ul>\n                <li><Link to=\"\/\">Home<\/Link><\/li>\n                <li><Link to=\"\/about\">About<\/Link><\/li>\n            <\/ul>\n        <\/nav>\n    );\n};\n\nexport default Navbar;\n<\/pre>\n
The new About<\/i> page is now accessible from the navigation.<\/p>\n\"\"\n
Step 4: Apply Styling<\/h2>\n
To enhance the appearance of the new static page, CSS can be added either in an external CSS<\/i> file or a CSS module. For example, an About.css<\/i> file can be created:<\/p>\n
\n.about-container {\n    padding: 20px;\n    font-family: Arial, sans-serif;\n}\n<\/pre>\n
Then, import and apply it in the About<\/i> component:<\/p>\n
\nimport React from 'react';\nimport '.\/About.css';\n\nconst About = () => {\n    return (\n        <div className=\"about-container\">\n            <h1>About Us<\/h1>\n            <p>Learn more about our company and services.<\/p>\n        <\/div>\n    );\n};\n\nexport default About;\n<\/pre>\n
This makes it easier to manage styles efficiently across static pages.<\/p>\n
Conclusion<\/h2>\n
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.<\/p>\n
Frequently Asked Questions<\/h2>\n
Can static pages in React contain dynamic content?<\/h3>\n
Yes, static pages in React can include dynamic elements like state-based changes or fetched data, but their primary structure remains predefined.<\/p>\n
What is the difference between a static and a dynamic page in React?<\/h3>\n
Static pages mainly contain fixed content, while dynamic pages interact with APIs or user input to modify displayed data dynamically.<\/p>\n
Do I need React Router to create a static page?<\/h3>\n
Yes, React Router provides a structured way to navigate between different pages in a React application.<\/p>\n
How can I test my new static page?<\/h3>\n
Run your app using npm start<\/i> or yarn start<\/i> and navigate to the specified route in the browser.<\/p>\n
Can I add a static page without modifying App.js?<\/h3>\n
Yes, by defining routes in a separate routing file and importing it into App.js<\/i>, modifications to App.js<\/i> can be minimized.<\/p>\n","protected":false},"excerpt":{"rendered":"
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. Read more<\/a><\/p>\n","protected":false},"author":79,"featured_media":5387,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[665],"tags":[],"class_list":["post-5386","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50","no-featured-image-padding"],"yoast_head":"\nHow to Add Another Static Page in a React App - Unit Conversion Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Another Static Page in a React App - Unit Conversion Blog\" \/>\n<meta property=\"og:description\" content=\"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. Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Unit Conversion Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-05T16:13:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-05T16:24:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/unitconversion.io\/blog\/wp-content\/uploads\/2025\/02\/black-flat-screen-computer-monitor-react-routing-setup-code.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Olivia Brown\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Olivia Brown\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/\"},\"author\":{\"name\":\"Olivia Brown\",\"@id\":\"https:\/\/unitconversion.io\/blog\/#\/schema\/person\/4ea06b340c4660f4a04bd6d58c582b69\"},\"headline\":\"How to Add Another Static Page in a React App\",\"datePublished\":\"2025-02-05T16:13:15+00:00\",\"dateModified\":\"2025-02-05T16:24:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/\"},\"wordCount\":627,\"publisher\":{\"@id\":\"https:\/\/unitconversion.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/unitconversion.io\/blog\/wp-content\/uploads\/2025\/02\/black-flat-screen-computer-monitor-react-routing-setup-code.jpg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/\",\"url\":\"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/\",\"name\":\"How to Add Another Static Page in a React App - Unit Conversion Blog\",\"isPartOf\":{\"@id\":\"https:\/\/unitconversion.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/unitconversion.io\/blog\/wp-content\/uploads\/2025\/02\/black-flat-screen-computer-monitor-react-routing-setup-code.jpg\",\"datePublished\":\"2025-02-05T16:13:15+00:00\",\"dateModified\":\"2025-02-05T16:24:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/#primaryimage\",\"url\":\"https:\/\/unitconversion.io\/blog\/wp-content\/uploads\/2025\/02\/black-flat-screen-computer-monitor-react-routing-setup-code.jpg\",\"contentUrl\":\"https:\/\/unitconversion.io\/blog\/wp-content\/uploads\/2025\/02\/black-flat-screen-computer-monitor-react-routing-setup-code.jpg\",\"width\":1080,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/unitconversion.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add Another Static Page in a React App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/unitconversion.io\/blog\/#website\",\"url\":\"https:\/\/unitconversion.io\/blog\/\",\"name\":\"Unit Conversion Blog\",\"description\":\"On conversion and other things :)\",\"publisher\":{\"@id\":\"https:\/\/unitconversion.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/unitconversion.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/unitconversion.io\/blog\/#organization\",\"name\":\"Unit Conversion Blog\",\"url\":\"https:\/\/unitconversion.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/unitconversion.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/unitconversion.io\/blog\/wp-content\/uploads\/2021\/01\/uclogo.png\",\"contentUrl\":\"https:\/\/unitconversion.io\/blog\/wp-content\/uploads\/2021\/01\/uclogo.png\",\"width\":500,\"height\":500,\"caption\":\"Unit Conversion Blog\"},\"image\":{\"@id\":\"https:\/\/unitconversion.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/unitconversion.io\/blog\/#\/schema\/person\/4ea06b340c4660f4a04bd6d58c582b69\",\"name\":\"Olivia Brown\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/unitconversion.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/441e8f5d29c2bd1022936f38e27eee93?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/441e8f5d29c2bd1022936f38e27eee93?s=96&d=mm&r=g\",\"caption\":\"Olivia Brown\"},\"description\":\"I'm Olivia Brown, a tech enthusiast and freelance writer. My focus is on web development and digital tools, and I enjoy making complex tech topics easier to understand.\",\"url\":\"https:\/\/unitconversion.io\/blog\/author\/olivia\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Another Static Page in a React App - Unit Conversion Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Another Static Page in a React App - Unit Conversion Blog","og_description":"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. Read more","og_url":"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/","og_site_name":"Unit Conversion Blog","article_published_time":"2025-02-05T16:13:15+00:00","article_modified_time":"2025-02-05T16:24:23+00:00","og_image":[{"width":1080,"height":720,"url":"https:\/\/unitconversion.io\/blog\/wp-content\/uploads\/2025\/02\/black-flat-screen-computer-monitor-react-routing-setup-code.jpg","type":"image\/jpeg"}],"author":"Olivia Brown","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Olivia Brown","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/#article","isPartOf":{"@id":"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/"},"author":{"name":"Olivia Brown","@id":"https:\/\/unitconversion.io\/blog\/#\/schema\/person\/4ea06b340c4660f4a04bd6d58c582b69"},"headline":"How to Add Another Static Page in a React App","datePublished":"2025-02-05T16:13:15+00:00","dateModified":"2025-02-05T16:24:23+00:00","mainEntityOfPage":{"@id":"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/"},"wordCount":627,"publisher":{"@id":"https:\/\/unitconversion.io\/blog\/#organization"},"image":{"@id":"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/#primaryimage"},"thumbnailUrl":"https:\/\/unitconversion.io\/blog\/wp-content\/uploads\/2025\/02\/black-flat-screen-computer-monitor-react-routing-setup-code.jpg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/","url":"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/","name":"How to Add Another Static Page in a React App - Unit Conversion Blog","isPartOf":{"@id":"https:\/\/unitconversion.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/#primaryimage"},"image":{"@id":"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/#primaryimage"},"thumbnailUrl":"https:\/\/unitconversion.io\/blog\/wp-content\/uploads\/2025\/02\/black-flat-screen-computer-monitor-react-routing-setup-code.jpg","datePublished":"2025-02-05T16:13:15+00:00","dateModified":"2025-02-05T16:24:23+00:00","breadcrumb":{"@id":"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/#primaryimage","url":"https:\/\/unitconversion.io\/blog\/wp-content\/uploads\/2025\/02\/black-flat-screen-computer-monitor-react-routing-setup-code.jpg","contentUrl":"https:\/\/unitconversion.io\/blog\/wp-content\/uploads\/2025\/02\/black-flat-screen-computer-monitor-react-routing-setup-code.jpg","width":1080,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/unitconversion.io\/blog\/how-to-add-another-static-page-in-a-react-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/unitconversion.io\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Add Another Static Page in a React App"}]},{"@type":"WebSite","@id":"https:\/\/unitconversion.io\/blog\/#website","url":"https:\/\/unitconversion.io\/blog\/","name":"Unit Conversion Blog","description":"On conversion and other things :)","publisher":{"@id":"https:\/\/unitconversion.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/unitconversion.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/unitconversion.io\/blog\/#organization","name":"Unit Conversion Blog","url":"https:\/\/unitconversion.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/unitconversion.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/unitconversion.io\/blog\/wp-content\/uploads\/2021\/01\/uclogo.png","contentUrl":"https:\/\/unitconversion.io\/blog\/wp-content\/uploads\/2021\/01\/uclogo.png","width":500,"height":500,"caption":"Unit Conversion Blog"},"image":{"@id":"https:\/\/unitconversion.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/unitconversion.io\/blog\/#\/schema\/person\/4ea06b340c4660f4a04bd6d58c582b69","name":"Olivia Brown","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/unitconversion.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/441e8f5d29c2bd1022936f38e27eee93?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/441e8f5d29c2bd1022936f38e27eee93?s=96&d=mm&r=g","caption":"Olivia Brown"},"description":"I'm Olivia Brown, a tech enthusiast and freelance writer. My focus is on web development and digital tools, and I enjoy making complex tech topics easier to understand.","url":"https:\/\/unitconversion.io\/blog\/author\/olivia\/"}]}},"_links":{"self":[{"href":"https:\/\/unitconversion.io\/blog\/wp-json\/wp\/v2\/posts\/5386"}],"collection":[{"href":"https:\/\/unitconversion.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unitconversion.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unitconversion.io\/blog\/wp-json\/wp\/v2\/users\/79"}],"replies":[{"embeddable":true,"href":"https:\/\/unitconversion.io\/blog\/wp-json\/wp\/v2\/comments?post=5386"}],"version-history":[{"count":1,"href":"https:\/\/unitconversion.io\/blog\/wp-json\/wp\/v2\/posts\/5386\/revisions"}],"predecessor-version":[{"id":5396,"href":"https:\/\/unitconversion.io\/blog\/wp-json\/wp\/v2\/posts\/5386\/revisions\/5396"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/unitconversion.io\/blog\/wp-json\/wp\/v2\/media\/5387"}],"wp:attachment":[{"href":"https:\/\/unitconversion.io\/blog\/wp-json\/wp\/v2\/media?parent=5386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unitconversion.io\/blog\/wp-json\/wp\/v2\/categories?post=5386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unitconversion.io\/blog\/wp-json\/wp\/v2\/tags?post=5386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}