DEV Community

_Khojiakbar_
_Khojiakbar_

Posted on

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;
Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay