在自己的页面上呈现动态内容

Question

跟进this question。我正在尝试为从WordPress API动态呈现的数据生成完全独立的视图。我能够生成新链接，但我一直收到未定义的错误，因为数据没有被正确传递。我在哪里弄错了？

App.js

import React, { Component } from 'react';
import { Link, Route, Switch } from 'react-router-dom';
import Home from './Home';
import Articles from './Articles';
import Article from './Article';

let article;
class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="nav">
          <Link to="/">Home</Link>&nbsp;&nbsp;
          <Link to="/category">Category</Link>&nbsp;&nbsp;
          <Link to="/articles">Articles</Link>&nbsp;&nbsp;

        </div>

        <div>
        <Switch>
          <Route exact path={"/"} component={Home} />
          <Route path={"/category"} component={Category} />
          <Route path={"/articles"} component={Articles} />
          <Route path="/news/:articleSlug" render={(props) => <Article  {...props} />} />

        </Switch>
      </div>
      </div>
    );
  }
}

export default App;

Articles.js

import React, { Component } from 'react';
import { Link, Route } from 'react-router-dom';
import Article from './Article';

const newsURL = "http://myprivateblogapi.com/wp-json/wp/v2/posts?_embed/wp-json/wp/v2/posts?_embed";

export default class Articles extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newsData: [],
      requestFailed: false
    }
  }

  componentDidMount() {
    fetch(newsURL)
      .then(response => {
        if(!response.ok) {
          throw Error("Network request failed.");
        }
        return response
      })
      .then(d => d.json())
      .then(d => {
        this.setState({
          newsData: d
        })
      }, () => {
        this.setState({
          requestFailed: true
        })
      })
  }

  render() {

    let articles = this.state.newsData.map((article, index) => {
      if(this.state.requestFailed) return <p>Failed!</p>
      if(!this.state.newsData) return <p>Loading...</p> 
      return(
        <div key={index} className="article-container">

          <div className="article-preview">
          <span className="article-date">{article.date}</span>
          <h5>{article.title.rendered}</h5>
          <div dangerouslySetInnerHTML={{ __html: article.excerpt.rendered }} />

          <Link to={`/news/${article.slug}`}>Read More...</Link>

          </div>
          <Route path={`/news/:articleSlug`}
            render={ props => <Article data={article} {...props} />} />
        </div>

      )
    });

    return (
      <div>
        <h3>All Articles from Blog</h3>
        {articles}
      </div>
    )
  }
}

Article.js

import React from 'react';

const Article = ({match, data}) => {
  let articleData;

  if(data)
    articleData = <div>
      <h3> {data.title.rendered}</h3>
      <div dangerouslySetInnerHTML={{ __html: data.content.rendered }} />
      <hr />
    </div>

  else 
    articleData = <h2> Sorry. That article doesn't exist. </h2>;

    return (
      <div>
        <div>
          {articleData}
        </div>
      </div>
    )
}

export default Article;

页面一直默认为＆＃34;抱歉＆＃34;块。