Javascript react路由器：函数不是有效的react子级

我注意到有人问了很多关于函数作为react子函数无效的问题，但从我看到的情况来看，没有一个适合我的情况

我使用react router，出现错误（函数作为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>   
    );
  }
}

从'react Router dom'导入{BrowserRouter as Router，Route，Switch}；
//所有其他进口商品也在这里
类应用程序扩展组件{
渲染（）{
返回(
);
}
}

如果我将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>   
);

const应用=(
);

---

它工作得很好。我不知道为什么会发生这种情况

在Garret Motzner的评论之后，我将Dom渲染函数从这个

ReactDOM.render（App，document.getElementById（'root'）

到

ReactDOM.render（，document.getElementById（'root'）

现在它可以工作了
如何在另一个文件中呈现
App
？比如ReactDOM.render（App，document.getElementById（'root'）；