react-router: functions are not valid react child

Question

I noticed a lot of questions has been asked about functions not valid as react child but none fits my case from what I saw.

I use react-router and the error (Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.) occurs when I try to use the Es6 class syntax to create my App components. Here is my code:

    import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
//all other imports are here too
    class App extends Component {
  render () {
    return (
      <Router>
        <div className="App">
          <Header />

          <Switch>
            <Route path ='/blog/' component={Blog} />
            <Route path ='/about/' component={About} />
            <Route path ='/register/' component={Register} />
            <Route component={Carousel} />
          </Switch>

              <Route path='/' exact component={Main} />
              <Route path='/foreign/' component={Foreign} />
              <Route path='/local/' component={Local} />
              <Route path='/snacks/' component={Snacks} />



        </div>

      </Router>   
    );
  }
}

if I change the Es6 class syntax to a function like this,

    const App = (
    <Router>
      <div className="App">
        <Header />

        <Switch>
          <Route path ='/blog/' component={Blog} />
          <Route path ='/about/' component={About} />
          <Route path ='/register/' component={Register} />
          <Route component={Carousel} />
        </Switch>

        <Route path='/' exact component={Main} />
        <Route path='/foreign/' component={Foreign} />
        <Route path='/local/' component={Local} />
        <Route path='/snacks/' component={Snacks} />



      </div>

    </Router>   
);

It works perfectly. I don't know why this is happening

Answer 1

following Garret Motzner comment I switched the Dom render function from this

ReactDOM.render(App, document.getElementById('root'));

to

ReactDOM.render(<App />, document.getElementById('root'));

and it now work