title: How to pass props to dynamic route?
body: <p>I create a list of dynamic routes (Posts) and a component of a single route (Post), but cannot figure out, hou to pass props to each route. I simplified the code, leaving only what concerns the routing.</p>
  
  <p>Here is the Posts component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Post from './Post';
  import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';
  
  const shutruk = [
    {
      "id": 1,
      "title": "Shutruk-Nahhunte",
      "info": "Was king of Elam from about 1184 to 1155 BC"
    },
    {
      "id": 2,
      "title": "Shilkhak-Inshushinak",
      "info": "Was king of Elam from about 1150 to 1120 BC"
    },
    {
      "id": 3,
      "title": "Untash-Napirisha",
      "info": "He was the son of the previous Elamite king"
    },
    {
      "id": 4,
      "title": "Kutik-Inshushinak",
      "info": "His father was Shinpi-khish-khuk, the crown prince"
    }
  ];
  
  class Posts extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;BrowserRouter&gt;
          &lt;Link to="/posts"&gt;&lt;h2 className="center" &gt;Posts&lt;/h2&gt;&lt;/Link&gt;&lt;br/&gt;
          &lt;div className="center"&gt;&lt;img src={require('../img/orn.png')} alt="" className="orn" /&gt;&lt;/div&gt;     
            &lt;Switch&gt;
              &lt;Route path="/posts" exact component={Home} /&gt;
              &lt;Route path="/posts/:id" component={Post} /&gt;
            &lt;/Switch&gt;
          &lt;/BrowserRouter&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const Home = () =&gt; (
    &lt;div&gt;
      {
        shutruk.map(shutruk =&gt; (
          &lt;h3&gt;&lt;Link to={'posts/' + shutruk.id}&gt;{shutruk.title}&lt;/Link&gt;&lt;/h3&gt;
        ))
      }
    &lt;/div&gt;
  );
  
  export default Posts;
  </code></pre>
  
  <p>The Post component:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Post extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;h3&gt;&lt;/h3&gt; //Here should be each value from "title"
          &lt;h5&gt;&lt;/h5&gt; //Each "info" value   
        &lt;/div&gt;
      );
    }
  }
  
  export default Post;
  </code></pre>
  
  <p>How to do it in the right way?
  Many thanks in advance!))</p>