Basic ReactJS Components routing
Whether to use React.Fragment or not depends on how you want the resulting DOM structured. Using React.Fragment avoids introducing additional elements in the DOM when they are not needed.

Fragments were introduced because only one React element can be returned from the render function, but it is pretty common and natural to need to return more than one element. Before Fragments, we had to wrap these elements in a div or other tag that really served no other purpose than to please React. This worked most of the time, but there were cases where it was not sufficient, such as when a component needed to return two tr elements. Wrapping tr's in a div and trying to place that in a tbody doesn't work. With Fragments, multiple elements can be returned and React does not have to render anything for the Fragment itself, only the children of the Fragment.

That being said, there are some situations where wrapping elements in a div or other tag makes sense. One that comes up frequently for me is when I have a component just like your products example, but I want to apply a margin, padding, border, or other style to the wrapper around the actual children. In that case, React.Fragment can't help me and I need a div or section.

A general rule-of-thumb, if you have a div or section that is doing absolutely nothing but letting you return multiple elements, you should switch it out with React.Fragment. If you are using that wrapper div in any way, keep it.

If you haven't yet, I would suggest reading the official Fragments guide. It demonstrates the table situation as an example for why Fragments were introduced.