title: How, using react-router-dom, can I direct a link to render a general post component, populated with props?
body: <p>I'm creating a blog with three posts, displayed initially as three cards, that a user may click on in order to render the post component matching the card. Right now, I am using a reducer to pull off the necessary details used in each post's cards. </p>
  
  <p>Here is my problem: I am using three individual post components (Post1, Post2 and Post3), that act as the components used in each Route tag. However, I would like to make my code more dynamic and be able to render a general post component in each Route tag, and somehow populate the post component with information from the specific reducers object, already used to pull off information to use in each card. </p>
  
  <p>so, I'd like to be able to write something like this:</p>
  
  <pre><code>&lt;Route exact exact path={`Post1`} component={Post}/&gt;
  </code></pre>
  
  <p>and then, when the appropriate card is clicked, somehow that particular instance of Post will render Post with props from the reducer object specifically for Post1. </p>
  
  <p>Is there some way I can do this???</p>
  
  <p>Here is my code for App.js: </p>
  
  <pre><code>class App extends React.Component {
      render() {
          const blogPosts = {
              Post1,
              Post2,
              Post3
          };
  
          var createRoutes = this.props.cards.map((card, i) =&gt; {
              return &lt;Route key={i} exact path={`/${card.title}`} exact component={blogPosts[card.id]}/&gt;
          });
          return(
              &lt;Switch&gt;
                  &lt;Route exact path='/' component={PostCards}/&gt;
                  {createRoutes}
              &lt;/Switch&gt;
          );
      }
  }
  
  function mapStateToProps(state) {
      return {
          cards: state.cards
      }
  }
  
  export default withRouter(connect(mapStateToProps)(App));
  </code></pre>
  
  <p>Here is my code for the list of cards: </p>
  
  <pre><code>class PostCards extends React.Component {
      render() {
          var createCards = this.props.cards.map((card, i) =&gt; {
              return (
                  &lt;div style={{margin: '20px'}} key={i}&gt;
                      &lt;Link to={`/${card.title}`}&gt;
                          &lt;PostCard title={card.title} subtitle={card.subtitle} date={card.date} text={card.text} backgroundImage={card.image} detail={card.detail}/&gt;
                      &lt;/Link&gt;
                  &lt;/div&gt;
              );
          });
          return (
              &lt;div style={{display: 'flex', flexDirection: 'row'}}&gt;{createCards}&lt;/div&gt;
          );
      };
  }
  
  function mapStateToProps(state) {
      return {
          cards: state.cards
      };
  }
  
  export default connect(mapStateToProps)(PostCards);
  </code></pre>
  
  <p>an example of the code for a Post (Post1):</p>
  
  <pre><code>const Post1 = () =&gt; {
      return (
          &lt;div&gt;hello this is post 1&lt;/div&gt;
      );
  }
  
  export default Post1;
  </code></pre>
  
  <p>and the code for the reducer: </p>
  
  <pre><code>export default function() {
      return [
          { id: 'Post1', 
            title: 'Post1', 
            subtitle: 'subtitle', 
            date: '1.1.17', 
            text: 'this is the post text for post 1', 
            image: 'url("../client/images/image.jpg")',
            detail: 'this is the detail'
          },
  
          { id: 'Post2', 
            title: 'Post2', 
            subtitle: 'subtitle', 
            date: '2.1.17', 
            text: 'this is the post text for post 2',
            image: 'url("../client/images/image.jpg")',
            detail: 'this is the detail'
          },
  
          { id: 'Post3', 
            title: 'Post3', 
            subtitle: 'subtitle', 
            date: '3.1.17', 
            text: 'this is the post text for post 3',
            image: 'url("../client/images/image.jpg")',
            detail: 'this is the detail'
          },
      ]
  }
  </code></pre>