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.
Top comments (0)