How to render an object from an array into another component in React?

From an array of posts that are passed and rendered to one component, I want to be able to render a single post of this array into another component but I can't find a way to do this.

I have two components that I use for this case, the first component "Blog" renders a preview of all the posts that are in the array. Each post has a<Link to={/blog/post-1/:${post.id}}>Go to post</Link> to the second component "Post" which renders a single post from the array. I am using react boiler plate for this.

First my container who has a dummy array of posts:

import React from 'react';
// other imported stuff
import Blog from 'components/Blog';

class BlogPage extends React.Component {

render() {
// dummy posts data
const posts = [
  {
    id: 1,
    title: 'How to Cook Blue Meth',
    description: 'Lorem ipsum dolor sit amet, turpis at',
    thump: 'thump.jpg',
    hero: '/img/',
    category: 'k1',
    fullname: 'Walter White',
    published: '10.05.2016, 15:30pm',
  },
  {
    id: 2,
    title: 'Passenger',
    description: 'Lorem ipsum dolor sit amet, turpis at',
    thump: 'thump.jpg',
    hero: '/img/',
    category: 'k2',
    fullname: 'Chino Moreno',
    published: '10.05.2016, 15:30pm',
  },
  // and more posts...
];
return (
// this is the first component
   <div>
     <Blog posts={posts} />
   </div>
   );
  }
}
export default connect(null, mapDispatchToProps)(BlogPage);

Here is the first component Blog:

import React from 'react';
import { Link } from 'react-router';

class Blog extends React.Component {

renderPosts() {
  return (
    <ul>
      {this.props.posts.map((post, idx) => {
        return (
          <li key={idx}>
            <p>{post.title}</p>
            <p>{post.category}</p>
            <p>{post.thump}</p>
            <p>{post.fullname}</p>
            <p>{post.published}</p>
            <Link to={`/blog/post-1/:${post.id}`}>Go to post </Link>
          </li>
         );
       })}
    </ul>
   );
}
render() {
  return (
    <div>
      {this.renderPosts()}
    </div>
  );
 }
}
Blog.propTypes = {
  props: React.PropTypes.array,
};
export default Blog;

And the second component Post:

import React from 'react';

class Post extends React.Component {

render() {
  return (
     <div>
       <p>{this.props.post.hero}</p>
       <p>Title:{this.props.post.title}</p>
       <p>{this.props.post.description}</p>
       <p>Category:{this.props.post.category}</p>
       <p>{this.props.post.thump}</p>
       <p>Author:{this.props.post.fullname}</p>
       <p>Published:{this.props.post.published}</p>
     </div>
  );
 }
}
Post.propTypes = {
  post: React.PropTypes.object,
};
export default Post;

I import this second component into another container:

import React from 'react';
import Post from 'components/Blog/Post';

class PostPage extends React.Component {

 render() {
    return (
     <div>
       <Post post={post} />
     </div>
    );
 }
}
export default connect(null, mapDispatchToProps)(PostPage);

This are my routes:

{
  path: '/blog',
  name: 'blog',
  getComponent(nextState, cb) {
    System.import('containers/BlogPage')
      .then(loadModule(cb))
      .catch(errorLoading);
  },
},
{
  path: '/blog/post-1/:id',
  name: 'blog-post-1',
  getComponent(nextState, cb) {
    System.import('containers/BlogPage/PostPage')
      .then(loadModule(cb))
      .catch(errorLoading);
  },
},

I just added this routes to the routes.js in the react boiler plate. In this point I don't know how to pass the single post to get rendered. Any help would be appreciated