react-router：功能无效反应子级

Question

我注意到，对于那些不能有效地作为子反应的功能，但从我所看到的情况来看，没有任何一个适合我的情况的问题被问了很多问题。

我使用react-router并报错（函数作为React子代无效。如果您返回一个Component而不是从render中返回，则可能会发生这种情况。或者您可能打算调用此函数而不是返回它< / strong>。） 尝试使用Es6类语法创建我的App组件时发生。 这是我的代码：

    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

在Garret Motzner评论之后，我从中切换了Dom渲染功能

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

到

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

现在可以正常使用