Basic ReactJS Components routing

Question

Recently I've started learning ReactJS and I do not look forward to making one Page website so I learned about react-router and this is my way of doing to it.

App.js

import React, { Component } from "react";
import "babel-polyfill";
import Navbar from "./Components/MenuNavbar";
import Footer from "./Components/Bottom";
import Home from "./Components/Home";
import About from "./Components/About";
import Contact from "./Components/Contact";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Products from "./Components/Products";
import { CircleArrow as ScrollUpButton } from "react-scroll-up-button";
// import Topbar from "./Components/Topbar";

class App extends Component {
  render() {
    return (
      <div className="App">
        <Router>
          <React.Fragment>
            <Navbar />
            <Switch>
              <Route exact path="/" component={Home} />
              <Route exact path="/products" component={Products} />
              <Route exact path="/about" component={About} />
              <Route exact path="/contact" component={Contact} />
            </Switch>
            <ScrollUpButton />
            <Footer />
          </React.Fragment>
        </Router>
      </div>
    );
  }
}

export default App;

In my other Components, I wrap parent in a div as learned in some tutorials, like this:

render() {
    return (
      <div id="products">
        <ProductsHero />
        <ProductsCashew />
        <ProductsAlmonds />
      </div>
    );
  }

Is this the best practice? If not how can I improve? Shall I wrap every child in React.Fragment instead of div? If so why?

Answer 1

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.