I learned React Fragments
Tags: react, javascript, webdev
Published: 2018-02-26 12:36:34

---
title: I learned React Fragments
published: true
description: React Fragments in a Wrap
tags: react, javascript, webdev
---
![What are React Fragments](https://thepracticaldev.s3.amazonaws.com/i/5p3r4ze0bgzbg1uoxsim.jpg)

I bet you read that title & thought “Whoa that sentence is a Fragment!” 😜 Haha what the title should say is “I learned about React Fragments”. Anyways I know what you’re asking “What are React Fragments?!?” They are a common pattern for a component to return a list of children.

> Note: React 16 added support for returning an array of elements from a component’s `render` method & as of React 16.2 provides a first-class `Fragment` component that can be used in place of arrays.)

I just learned about them (I know I’m a little late to the game) & ran into a good use case where it came in handy!

So I’m setting up my routes & want to make certain routes are available only when a User is Logged & vice-versa.

![Routes Setup Example #1](https://cdn-images-1.medium.com/max/1600/1*nHMDhLMLaBbkezB1AqjTHg.png)

So I come up with something like & this works perfectly but this brings up a small issue. When running the above setup if you open up your browser console you will notice the error below. 

![Warning: React does not recognize the `computedMatch` prop on a DOM element](https://cdn-images-1.medium.com/max/1600/1*KpZyhhtrCH6zgAn1W4uE4A.png)

The reason React is throwing this error is because the `Switch` component only expects `Route` components children. 🤔 Hmmmm so lets try this. Let’s wrap each Route in it’s own conditional & see if this fixes our error.

![Routes setup Example #2](https://cdn-images-1.medium.com/max/1600/1*fD70WVaTz4FnLCkROEyi3g.png)

Andddd yup it fixes our error! Hmm but this doesn’t seem like the best solution because it isn’t [DRY](https://en.wikipedia.org/wiki/Don't_repeat_yourself) & contains [code smells](https://en.wikipedia.org/wiki/Code_smell). If we go with this solution we’ll have to include the `isLoggedIn` conditional for every single new Route. Also our code will be computing the same condition for x amount of routes that we have(This is a code smell 😷). So what can we do? I really like our first example because it was DRY & it didn’t contain a code smell but wrapping our routes in a `div` gives us an ugly looking error. I know what your saying to yourself, “I wish there was a way you can wrap stuff in React magically!”.

![Your Wish is my command!](https://cdn-images-1.medium.com/max/1600/1*2oFH4ZWIpYwu5bb8uuGaZQ.png)

[React Fragment](https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html) to the Rescue!!! We can now keep what we had in our first example & just replace the `div` with Fragment (imported from ‘react’).

> See note below on why we’re importing a custom Switch component.

![Routes Setup Example #3](https://thepracticaldev.s3.amazonaws.com/i/q13k5nlejj3ql661ywtt.png)

> See a live example here: https://codesandbox.io/s/7k9rn30jmq?module=%2Fsrc%2Fconfig%2Froutes.js&view=editor

Yay No more errors! That about WRAPS up this post! 😉


---


_For more puns and code tips follow my journey on twitter [@clickclickonsal](https://twitter.com/clickclickonsal)_

<em>This article originally published on my <a href="https://medium.com/@clickclickonsal/i-learned-react-fragment-6db6d482cb1c">Medium publication</a></em>

>Edit (February 27th, 2018)
Note: [@leandroaps](https://medium.com/@leandroaps) ran into a issue where his <NotFound /> route was always getting rendered. It turns out React-Router’s <Switch /> Component doesn’t have support for routes wrapped in Fragments. While the code “seems” to work fine it breaks when trying to add a “catch all” route. I looked into this and found a Github related issue & came across a workaround for this problem [here](https://github.com/ReactTraining/react-router/issues/5785#issuecomment-359427800). The workaround is to wrap the react-router Switch component that includes logic to flatten the routes out. I’ve updated the code sandbox above to include this fix so you can see how it’s implemented. Thanks [@bripkens](https://github.com/bripkens) for the your Open Source contributions! 😃