反应新闻博客详细信息页面，显示无数据

Question

使用newsapi.org的反应和数据构建新闻博客。试图通过匹配url参数为每个新闻文章创建详细信息页面，如果url匹配，则页面详细信息将呈现其他条件。这是我的一段代码：

Post.js

/*jshint esversion: 8*/
// eslint-disable-next-line
import React, {Component} from 'react';

const Post = (props) => {
    const validUrl = this.props.match.params.url;
    const postcard = () => {
        if (validUrl === props.url) {
          return (
            <div>
              <div class="card card-cascade wider reverse">
                <div class="view view-cascade overlay">
                  <img class="card-img-top" src={this.props.urlToImage} alt="Card image cap"/>
                  <a href="#!">
                    <div class="mask rgba-white-slight"></div>
                  </a>
                </div>
                <div class="card-body card-body-cascade text-center">
                  <h4 class="card-title"><strong>{this.props.title}</strong></h4>
                  <h6 class="font-weight-bold indigo-text py-2">{this.props.author}</h6>
                  <p class="card-text">{this.props.content}</p>
                  <p><a class="px-2 fa-lg li-ic">Source:{this.props.author}</a></p>
                </div>
              </div>)
            </div>
          );
        } else {
          return <div><h1>Page Not Found</h1></div>;
        }
      };

    return (
      <div class="container">
          {postcard}
      </div>
    );

  };



export default Post;

App.js代码，URL为动态路由。

App.js

/*jshint esversion:6*/
import React, { Component } from 'react';
import './App.css';
import Navbar from './Components/Navbar/Navbar.js';
import Cards from './Components/Cards/Cards.js';
import World from './Components/Cards/Categories/World.js';
import Business from './Components/Cards/Categories/Business.js';
import Footer from './Components/Footer/Footer.js';
import Post from './Components/Post/Post.js';
import { BrowserRouter, Route } from 'react-router-dom';

class App extends Component {
  render() {
    return (
        <BrowserRouter>
          <div className="App">
            <Navbar/>
            <Route exact path="/" component={Cards}/>
            <Route exact path="/WorldNews" component={World}/>
            <Route exact path="/BusinessNews" component={Business}/>
            <Route exact path = "/Post/:url" render={props => <Post {...props}/>}/>
            <Footer/>
          </div>
        </BrowserRouter>
    );
  }
}

export default App;