title: 404 error when rendering component from state in react-redux app with react-routerv4?
body: <p>*This is a React-Redux tutorial, so please no other solutions :) </p>
  
  <p><strong>Desired behavior</strong>: Pass props of parent component to the PostDetail component from state controlled by redux</p>
  
  <p><strong>Current output</strong>: </p>
  
  <p>(1) 204 Result: </p>
  
  <pre><code>http://localhost:3001/react/8xf0y6ziyjabvozdd253nd
  Request Method: OPTIONS
  **strong text**Status Code: 204 No Content
  </code></pre>
  
  <p>(2) Consoled Errors:</p>
  
  <pre><code>GET http://localhost:3001/react/8xf0y6ziyjabvozdd253nd 404 (Not Found)
      :3000/react/8xf0y6ziyjabvozdd253nd:1 
  
  Uncaught (in promise) SyntaxError: Unexpected token &lt; in JSON at position 0
  </code></pre>
  
  <p>Inside my app (root.js) file I have the PostDetail component I want to route to like this: </p>
  
  <pre><code>    import React, { Component } from 'react';
      import { Route } from 'react-router-dom'
      import Categories from './Categories'
      import ListPosts from './ListPosts'
      import Header from './Header'
      import PostDetail from './PostDetail'
  
      class App extends Component {
        render() {
          return (
            &lt;div&gt;
              &lt;Header /&gt;
              &lt;Categories /&gt;
              &lt;ListPosts /&gt;
              &lt;Route exact path="/:category/:id" component={PostDetail}/&gt;
           &lt;/div&gt;
  </code></pre>
  
  <p>Then in the PostDetail nested component (inside the ListPosts component) I have a function inside a material-ui flatbutton, <strong>(important sidenote: The PostDetail component does have a console.log statement that is being called, but the props.post is undefined)</strong>:</p>
  
  <pre><code>    selectPost = (selectedCategory, selectedPost) =&gt; {
        console.log('selectedCategory', selectedCategory, selectedPost)
        this.props.getSpecificPost(selectedCategory, selectedPost);
      }
     return (
      &lt;CardActions&gt;
          &lt;FlatButton
            label="See Thread"
            // href={`/${post.category}/${post.id}`}
            containerElement={&lt;Link to={`/${post.category}/${post.id}`} post={this.props.post} /&gt;}
            onClick={() =&gt; this.selectPost(post.category, post.id)}
          /&gt;
        )
  </code></pre>
  
  <p>In this same component are my mapStateToProps and mapDispatchToProps: </p>
  
  <pre><code>   const mapStateToProps = state =&gt; ({
       posts: state.postsReducer.posts,
       loading: state.postsReducer.loading,
       error: state.postsReducer.error,
       selectedCategory: state.categoriesReducer.selectedCategory,
       selectedPost: state.postsReducer.selectedPost,
     });
  
    function mapDispatchToProps (dispatch) {
      return {
       getSpecificPost: (selectedCategory, selectedPost) =&gt; 
           dispatch(getSpecificPost(selectedCategory, selectedPost)),
       fetchPosts: (selectedCategory) =&gt; dispatch(fetchPosts(selectedCategory))
      }
     }
  
   export default withRouter(connect(
     mapStateToProps,
     mapDispatchToProps
    )(PostPreview))
  </code></pre>
  
  <p>I am using a redux-thunk action call that is calling to my api:</p>
  
  <pre><code>   export function getSpecificPost(selectedCategory, selectedPost) {
       console.log('getSpecificPost', selectedPost)
       return dispatch =&gt; {
        dispatch(beginFetchPosts());
        return fetch(selectedPost ? `${api}/${selectedCategory}/${selectedPost}` 
            : null, { headers })
        .then(
         res =&gt; res.json(),
         error =&gt; console.log('An error occured at  getSpecificPost', error)
         )
         .then(json =&gt; {
           dispatch(selectPostSuccess(json));
           return json
           })
          }
         }
  </code></pre>
  
  <p>And a reducer: </p>
  
  <pre><code>    const initialState = {
       posts: [],
       categories: [],
       loading: false,
       error: null,
       selectedCategory: 'all',
       selectedPost: [],
       };
  
     export function postsReducer(state = readableInitialState, action) {
        switch(action.type) {
          case C.SELECTED_POST:
            return {
            ...state,
            loading: false,
            selectedPost: action.payload.selectedPost
           };
  </code></pre>
  
  <p>...And yes I finish the switch statement with a default statement and no syntax issues as far as a I know)</p>