реакции-маршрутизатор: функции не действительны реагируют на ребенка

Question

Я заметил, что было задано много вопросов о функциях, которые недопустимы, как реагирует ребенок, но ни один не соответствует моему случаю из того, что я видел.

Я использую реагирующий маршрутизатор и ошибка ( Функции недопустимы как дочерний элемент React. Это может произойти, если вы возвращаете компонент вместо рендера. Или, возможно, вы намеревались вызвать эту функцию, а не возвращать ее ). происходит, когда я пытаюсь использовать синтаксис класса Es6 для создания компонентов приложения. Вот мой код:

    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>   
    );
  }
}

если я изменю синтаксис класса Es6 на такую ​​функцию,

    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>   
);

Работает отлично. Я не знаю, почему это происходит

Answer 1

после комментария Гаррета Моцнера я переключил функцию рендеринга Dom с этого

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

до

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

и теперь работает