A simple guide for layouts in React Router

Hristo Enev
Dec 9, 2019 · 2 min read
React Router
React Router

It is very common when you build an application with routing to have some kind of common design with state between routes. For example a sidebar or some information content, like signed in user, or current time. Usually this is handled by layouts that are wrapped around our route content. It is very important for a layout to maintain its state and not re-render on route change.

In this simple and short guide I will show you how you can manage your routing in React with React Router and layouts that hold their state and don’t re-render on route navigation.

If you want to check the full code example, look into this StackBlitz or check my Github repo.

Let’s first define the components we will use for each page. We will keep them as simple as just one line of code per component. Just for the example.

Components.js

Now let’s define also our layouts. We will have two layouts. Page one and two will use layout one and page three and four will use layout two.

Layouts.js

Our layouts will display just a simple heading for example purposes as well as the special children property which will take the contents between the opening tag of the layout and it’s closing tag and provide it in the layout function as this exact property — children.

You can read more about the children special property in the official documentation of React about Composition vs Inheritance here.

Now the only thing left to define is the routes themselves.

index.js

The most important part here is our RouteWrapper component that is just an abstraction for our Route. We are passing component and layout to it and then we are just wrapping the component in our layout. It is important here to use the render prop of the Route in order to have a layout that maintain it’s state and don’t re-render upon route navigation.

Check the full code example at StackBlitz or check my Github repo. For more advanced application example check my React Auth w/ Firebase Github repository.

Conclusion

We have created a layout for our different pages that doesn’t change it’s state and doesn’t re-render upon route navigation. You can go ahead and test the results by adding some state or just by simply playing with the componentDidMount lifecycle function of the Layout components to see they just mount once when you access a page with them and then they do not re-render when you navigate to a different page with the same layout.

Feel free to comment and share your ideas and suggestions! Thanks for reading 🙏

Hristo Enev

Written by

Front end web developer

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade