Header in React

import { About, Location, Careers, Error } from "../views"; // Importing components from the 'views' directory
import { Routes, Route } from 'react-router-dom'; // Importing React Router DOM components
import Header from './Header'; // Importing the Header component
import Footer from './Footer'; // Importing the Footer component
import MainSection from './MainSection'; // Importing the MainSection component

// Defining the routes and their corresponding components
export const routerLinks = [
    {
        id: 1,
        path: '/about',
        component: <About/>,
        title: "About"
    },
    {
        id: 2,
        path: '/location',
        component: <Location/>,
        title: "Location"
    },
    {
        id: 3,
        path: '/careers',
        component: <Careers/>,
        title: "Careers"
    },
    {
        id: 4,
        path: '*', // This acts as a catch-all for undefined routes
        component: <Error/>
    }
];

// Main App component
const App = () => {
  return (
    <>
      <MainSection>
        <Header/>  {/* Header component */}
        <Routes>  {/* React Router DOM Routes component */}
          {
            routerLinks.length && 
            routerLinks.map((item) => 
            <Route key={item.id} path={item.path} element={item.component}/>)
          }
        </Routes>
        <Footer/>  {/* Footer component */}
      </MainSection>
    </>
  );
};

export default App;

Explanation:

Import Statements: The code imports necessary components like About, Location, Careers, Error, and other UI components like Header, Footer, and MainSection.

routerLinks Array: This array contains objects, each representing a route in the application. It includes:

id: A unique identifier for each route.
path: The URL path that triggers the route.
component: The component that will be rendered when the route is matched.
title: A title for the route (optional).

App Component:

The App component wraps the application content inside the MainSection.
It includes a Header at the top, followed by the Routes component, which renders the routes based on the routerLinks array.
Each route is mapped to a Route component using the map() function.
The Footer is placed at the bottom of the page.
This setup allows you to easily manage and add new routes in the routerLinks array.