Switch component shouldn't have div as children

[jogerj]

in Routes.tsx there's a piece of code which will throw warnings

<Switch>
  <Route path="/admin">
    <Admin />
  </Route>
  <div className={classes.app}>
    <header className={classes.header}>
      <Route path="/login" component={Login} />
      <Route path="/signup" component={SignUp} />
      <Route
        path="/logout"
        render={() => {
          logout();
          history.push('/');
          return null;
        }}
      />
      <PrivateRoute path="/protected" component={Protected} />
      <Route exact path="/" component={Home} />
    </header>
  </div>
</Switch>

This will generate the following warning from React: a warning is prompt from react: React does not recognize the computedMatch prop on a DOM element.

Reason is that div shouldn't be children of Switch component. Possible solutions: the Switch component should instead be inside the div or each component linked in Route should have their own div.

See post here