DEV Community

Cover image for How to build reusable layouts in React JS  with Router
Julfikar Haidar
Julfikar Haidar

Posted on

How to build reusable layouts in React JS  with Router

This is a common problem I couldn't do the common layout when I started to learn React. The problem is getting bigger as the scope of work increases. That is why there is a need for a common layout and we will use it again and again. Let's get started

Here is a simplified implementation of what I did.

Alt Text

This layout component will accept to get props such as title, description, className, children by default use some property here but we will be able to pass these properties from any other bases where we use this layout and that way we can dynamically display these content. We put inside single div and title, description these are headings but they will have the entire content. So with the last name of let's say let's asset class name as well so you might want different layout for different pages. Here classname send as props and content avaiable in children props . So this our layout now we should be able to use this layout any of the pages.Let's try in the Home page to begin with.

Alt Text

So let's say load from home page then we can use layout instead of using the div all we can do in layout. Now pass the title,desciption and send the content at the moment let's send anything let's just leave empty.Now if you go to the home page you can see we have the target achieve

Alt Text

So this way you can use this component and use any other component as your need For example if you don't send anything as props then you'll see the default title and description of what we have given

Alt Text

The similar way I use on another page before we do that let's further to go on and make it.

Alt Text

Here the code base whatever pass as props to get it and show output will be shown as we send.

Alt Text
RouterJs file here
Alt Text

If I made a mistake forgive me for seeking advice on how to do a better way thank you guy's and let's make it easy.

https://github.com/Julfikar-Haidar

Top comments (4)

Collapse
 
tsaxena4k profile image
Tushar saxena

Very simple and clean way

Collapse
 
abduallahnoorsayket profile image
abdullahnoorsayket

very helpful Article. thank you . keep it up.

Collapse
 
julfikarhaidar profile image
Julfikar Haidar

thank you.

Collapse
 
jorabek1318 profile image
Joʻrabek Saʼdullayev

👍👍👍👍