我尝试按照本教程来了解动态路由的工作原理。现在，我不想使用静态数据，而是想使用 WordPress 的 API 提取博客文章，为每篇文章生成唯一的链接。我能够生成链接，但在新页面上没有生成任何数据。我在这里做错了什么？

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";

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={articles} {...props} />} />
        </div>

      )
    });

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

Article.js（呈现每篇文章）

import React from 'react';

const Article = ({match, data}) => {
  let article = data.find(a => a.slug == match.params.articleSlug);
  let articleData;

  if(article)
    articleData = <div>
      <h3> {article.title.rendered}</h3>
      { console.log(`${article.title.rendered}`) }
      <p>{article.content.rendered}</p>
      { console.log(`${article.content.rendered}`) }
      <hr />
    </div>
  else 
    articleData = <h2> Sorry. That article doesn't exist. </h2>;

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

export default Article;