---
title: "Discussion on \"Create a layout component in react\" | Hashnode"
description: "Discussion on \"Create a layout component in react\". in this article we will learn how to create a layout component in react\nwe will create something like this\nHeader\nHome / About / contact\nFooter\nFolder structure\n\nIn your src folder create three folders and create the folowwing files1 - components fol..."
url: "https://hashnode.com/posts/create-a-layout-component-in-react/68c96da7958fbd41da260b10"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Create a layout component in react](https://mandeephub.hashnode.dev/create-a-layout-component-in-react?utm_source=hashnode&utm_medium=feed)

in this article we will learn how to create a layout component in react we will create something like this Header Home / About / contact Footer Folder structure In your src folder create three folders and create the folowwing files1 - components fol...

Sep 16, 2025 · 1 min read · mandeephub.hashnode.dev  
Read the article

-   [#reactjs](https://hashnode.com/tag/reactjs)
-   [#layout](https://hashnode.com/tag/layout)

## Written by

[Mandeep Sharma](https://hashnode.com/@mandeephub)

@mandeephub

  
[View profile](https://hashnode.com/@mandeephub)

Lets code it

## Responses 1

Markdown supported · ⌘↵ to post

[Saurav Pratap Singh](https://hashnode.com/@saurav26)

[Sep 17, 2025](https://hashnode.com/posts/create-a-layout-component-in-react/68c96da7958fbd41da260b10/comment/68caf120b1415523fa002f49)

Inside the children you have kept /about, in react-router-dom when you keep / at the start of a path, you make it absolute and absolute paths cannot be used inside the children itself, right now it will work, but if for going to MainLayout the path was /main then to goto about page the path would need to be /main/about which will fail in your case, because you are placing an absolute path as a children, FIX: remove / from the children path and for Home, you can use index: true instead of assigning it a path, keep coding !