title: React router dom on page refresh error - cannot read property of undefined?
body: <p>I am working on react redux firebase app. Inm App.js i get all the posts with title and body. I made the title a clickable link and passed the key as paraeter (see the code below). </p>
  
  <p>When i click it takes me to PostDetails page. Everything is working fine. The post is in the state (i can see in redux devtools, console log etc).</p>
  
  <blockquote>
    <p>But as soon as I refresh the page, i get error that says: TypeError:
    Cannot read property 'title' of undefined</p>
  </blockquote>
  
  <p>Any help would be highly appriciated. I am using react-router-dom for routing. Thanks!</p>
  
  <p>index.js - routes:</p>
  
  <pre><code>&lt;BrowserRouter&gt;
      &lt;Switch&gt;
          &lt;Route path="/:id" component={PostDetail} /&gt;
          &lt;Route exact path="/" component={App} /&gt;
      &lt;/Switch&gt;
  &lt;/BrowserRouter&gt;
  </code></pre>
  
  <p>App.js - component that has post title as a clickable link:</p>
  
  <pre><code>renderPosts() {
      return _.map(this.props.posts, (post, key) =&gt; {
        return (
          &lt;div key={key}&gt;
            &lt;Link to={`/${key}`}&gt;
              &lt;h3 className="card-title"&gt;{post.title}&lt;/h3&gt;
            &lt;/Link&gt;
            &lt;p&gt;{post.body}&lt;/p&gt;
            &lt;button onClick={() =&gt; this.props.deletePost(key)}&gt;Delete&lt;/button&gt;
          &lt;/div&gt;
        );
      });
    }
    render(){
      return (
          {this.renderPosts()}
      )
    }
    export default withRouter(connect(mapStateToProps, { getPosts, savePost, deletePost })(App));
  </code></pre>
  
  <p>PostDetail - component that displays full post:</p>
  
  <pre><code>class PostDetail extends Component {
      render() {
          const { post } = this.props;
          console.log(post);
          return (
              &lt;div&gt;
                  &lt;Link to={'/'}&gt;Go Home&lt;/Link&gt;
                  &lt;div&gt;
                      &lt;h1&gt;{post.title}&lt;/h1&gt;
                      &lt;p&gt;{post.body}&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  function mapStateToProps(state, ownProps) {
      return { post: state.posts[ownProps.match.params.id] };
  }
  export default withRouter(connect(mapStateToProps)(PostDetail));
  </code></pre>