未捕获（承诺中）错误：React.Children.only 预计会收到单个 React 元素子项答案

【问题标题】：Uncaught (in promise) Error: React.Children.only expected to receive a single React element child未捕获（承诺中）错误：React.Children.only 预计会收到单个 React 元素子项
【发布时间】：2017-09-06 09:26:18
【问题描述】：

我是 React JS 的新手，正在尝试实现到我的新闻应用程序的路由。我不断收到以下错误（我正在使用 React Router v4 https://reacttraining.com/react-router）

Uncaught (in promise) Error: React.Children.only expected to receive a single React element child.
    at invariant (invariant.js:44)
    at Object.onlyChild [as only] (onlyChild.js:33)
    at Router.render (Router.js:99)
    at ReactCompositeComponent.js:796
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)

这是我的路线文件

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import App from './App.js';
import SourceNews from './SourceNews';


const Routes = () => (

    <Router>
        <div>
            <Route path="/" component={App} />
            <Route path="/news/source/:id" component={SourceNews} />
        </div>
    </Router>
);


export default Routes;

我尝试按照这个反应路由器版本 4 教程进行操作，但似乎没有任何效果

https://reacttraining.com/react-router/web/example/url-params

谢谢

App.js

import React, { Component } from 'react';
import './App.css';
import './Routes.js';
import NewsList  from './NewsList';
import Header from './Header';

class App extends Component {

    constructor(props) {
       super(props);
       this.state = { sources: [] };
    }

    componentDidMount() {
        fetch('https://newsapi.org/v1/sources?language=en&apiKey=c0f3800ecd5e42f5b1f5bc0e2902bddb')
            .then(result=> result.json())
            .then(json =>  {
                this.setState({sources: json.sources});
            });
    }

    render() {

        const sources = this.state.sources;
        // console.log(sources)
        return (

            <div>
                <Header />
                <NewsList sources={sources} />
            </div>
        )

    }

}

export default App;

更新：

参考这篇文章解决了https://www.sigient.com/blog/movie-listings-application-with-react-router-v-4

【问题讨论】：

我认为看看 App.js 做了什么会很有用。为什么要在 div 中包装路由？
@MattiaGalati 删除
包装器也会产生同样的问题
好像App.js没有导出类。
@MattiaGalati 它正在导出 .. 见文件末尾
你在App.js中包含Routes.js，在Routes.js中包含App.js，可能会导致问题