What are layout components
Most of the time when developers are creating large web applications there are some sections or a common design they would like to use across multiple web pages on the frontend.
These sections or common designs are called layout components. Eg. A combination of a sidebar and title bar can form a layout component.
eg of layout component
This is a simple guide to help react devs who want to use layout components in react with the react router without re-rendering on route navigation
Creating layout component
Layout components make use of the “props.children” prop to render any components that are nested inside the layout component.
code for layout component
Creating components/pages that are going to be rendered
code for page1
code for page2
Routing in app.js file
code for app.js
index.js file
code for index.js
project Structure
project structure
Testing routes that aren't rendered with the layout
The first page component wasn't rendered with a Layout as seen below
first page
Testing routes rendered with the layout
The second page component was rendered with a Layout as seen below
Conclusion
In this guide we created a simple project with layout components that do not rerender on router navigation
click this Link to have access to the code on GitHub.
Thank you
Top comments (0)