React Router v4はコンポーネントにパラメータを渡します

Question

私はMeteorJS projetでReact Routerを使用していますが、新しいURLを作成するためには新しいSllugタイプ/blog /：slug urlと私のコンポーネントを作成してください。

しかし、私はどのように私のコンポーネント（例題のタイトル、説明、コメントなど）に小道具paramsを渡すことができないのか分かりません。

Object { path: "/blog/:slug", url: "/blog/test-slug", isExact: true, params: Object } 

は私がのparamsを持っていない：私は/ブログ/テストスラグに行くとき、私は私にconsole.logを表示するためにテストをしました。

あなたは私のルーティングを見ることができます：

class Layout extends React.Component { 
    render() { 
    return (
     <Router> 
     <div> 
      <Header /> 
      <main className="l-main"> 
      <Switch> 
       <Route exact path='/' component={Home} /> 
       <Route exact path='/blog' component={Blog} /> 
       <Route path='/blog/:slug' component={Article} /> 
       <Route path='/about' component={About} /> 
       <Route path='/contact' component={Contact} /> 
       <Route component={NotFound} /> 
      </Switch> 
      </main> 
      <Footer /> 
     </div> 
     </Router> 
    ); 
    } 
} 

記事のマイ・コンポーネント：

function Article(props) { 
    console.log(props.match); 
    return (
    <h1>{props.match.params.slug}</h1> 
); 
} 

と記事コンポーネントへのアクセスものための私のリンク：

<Link to={`/blog/${this.props.post.slug}`}>{this.props.post.title}</Link> 

誰もがこのことについて私を助けることができます？

コミュニティありがとうございます！

Answer 1

解決策1：データを追加するプロキシページコンポーネントを作成します。

<Route path='/blog/:slug' component={ArticlePage} /> 

const ArticlePage = ({ match }) => 
    <Article slug={match.params.slug} description="..." /> 

const Article = ({slug, description}) => 
    <h1>{slug} : {description}</h1> 

あるいは、解決策2：ユーザーがルート要素にコールバックをレンダリング：

<Route path='/blog/:slug' render={({match}) => (
    <Article slug={match.params.slug} description="..." /> 
)} /> 

const Article = ({slug, description}) => 
    <h1>{slug} : {description}</h1>