Using layout components with react router

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