title: useEffect not running at all when navigating to page with React Router
body: <p>App.js:</p>
  <pre><code>import React, { Fragment } from &quot;react&quot;;
  import Header from &quot;./components/Header&quot;;
  import PostList from &quot;./components/PostList&quot;;
  import Post from &quot;./components/Post&quot;;
  import TagList from &quot;./components/TagList&quot;;
  import { BrowserRouter as Router, Switch, Route } from &quot;react-router-dom&quot;;
  
  const App = () =&gt; {
    return (
      &lt;Fragment&gt;
        &lt;Router&gt;
          &lt;Header /&gt;
  
          &lt;Switch&gt;
            &lt;Route exact path=&quot;/&quot; component={PostList} /&gt;
            &lt;Route path=&quot;/tags&quot; component={TagList} /&gt;
            &lt;Route path=&quot;/posts/:id&quot; component={Post} /&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      &lt;/Fragment&gt;
    );
  };
  
  export default App;
  
  </code></pre>
  <p>Post.js:</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import Tag from &quot;./Tag&quot;;
  import { useParams } from &quot;react-router-dom&quot;;
  import axios from &quot;axios&quot;;
  
  const Post = () =&gt; {
    const { id } = useParams();
    const [post, setPost] = useState({});
  
    useEffect(() =&gt; {
      const fetchPost = async () =&gt; {
        try {
          const res = await axios.get(`/api/posts/${id}`);
  
          setPost(res.data);
        } catch (err) {
          console.error(err);
        }
      };
      fetchPost();
    }, []);
  
    return (
      &lt;div&gt;
        &lt;h2&gt;{post.title}&lt;/h2&gt;
        &lt;p&gt;{post.text}&lt;/p&gt;
        &lt;div&gt;
          {post.tags.map((tag) =&gt; (
            &lt;Tag key={tag._id} tag={tag} /&gt;
          ))}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Post;
  
  </code></pre>
  <p>I'm trying to get the skeleton for a simple blog site up and running but I'm having issues with the Post component. When navigating to a specific post with the route '/posts/:id' the useEffect that's supposed to grab the post from my API doesn't seem to run, and inevitably I end up with a 'post.tags is undefined' error. Everything else is working correctly - API responds as expected to requests from Postman and 'useParams' is grabbing the post id from the URL just fine - it's just that the useEffect isn't running at all (<code>console.logs</code> aren't showing up either).</p>
  <p>I've had no issues doing things this way in previous projects - in fact the useEffect in the TagList component is virtually identical and the /tags route works as expected, so I'm not sure what I'm missing?</p>