1

我是 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

谢谢

应用程序.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

4

2 回答 2

0

改变路线的顺序怎么样？

<div>
 <Route path="/news/source/:id" component={SourceNews} />
 <Route path="/" component={App} />
</div>
于 2017-04-28T20:50:16.103 回答
0

确保将您的路线包装在“Routes.js”文件中。但是，我个人认为您需要更新您的 react-router 版本，因为您使用的是旧版本的 react-router，我建议您使用 react-router 4，因为它工作得很好并且不太混乱。更新反应路由器后，您可以按如下方式更新代码：

import { BrowserRouter, Match, Miss } from 'react-router';
...
...
const Routes = () => {
    <BrowserRouter>
        <div>
            <Match exactly pattern="/" component={App} />
            <Match pattern="/news/source/:id" component={SourceNews} />
        </div>
    </BrowserRouter>
}
于 2017-07-02T06:09:12.793 回答