title: URL Profile ID doesn't match (match.params.id) and isnt dispalyed
body: <p>So whenever I clicked the View Profile Link:</p>
  <pre><code>&lt;Link to={`/profile/${_id}`} className=&quot;btn btn-primary&quot;&gt;
                  View Profile
   &lt;/Link&gt;
  </code></pre>
  <p>It shows in the URL the User ID of the Profile, which is Good. But I get a blank page and my navbar and div doesn't show from the below code:</p>
  <pre><code>const Profile = ({ getProfileById, profile: { profile, loading }, auth, match }) =&gt; {
    useEffect(() =&gt; {
      getProfileById(match.params.id);
    }, [getProfileById]);
  
    return &lt;div&gt;profile&lt;/div&gt;;
  }
  </code></pre>
  <p>In my console, I also do get &quot;Line 10:6:  React Hook useEffect has a missing dependency: 'match.params.id'. Either include it or remove the dependency array. Outer scope values like 'getProfileById' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps&quot; but IDK if it does anything. This is what my app.js looks like, and please help!</p>
  <p>App.js:</p>
  <pre><code>&lt;Route path='/profiles' element={&lt;Profiles/&gt;} /&gt; 
  &lt;Route path='/profile/:id' element={&lt;Profile/&gt;} /&gt;
  </code></pre>
  <p>This below is in my actions/profile.js file:</p>
  <pre><code>// Get profile by ID
  export const getProfileById = userId =&gt; async dispatch =&gt; {
  
    try {
      const res = await axios.get(`/api/profile/user/${userId}`);
  
      dispatch({
        type: GET_PROFILE,
        payload: res.data
      });
    } catch (err) {
      dispatch({
        type: PROFILE_ERROR,
        payload: { msg: err.response.statusText, status: err.response.status}
      });
    }
  };
  </code></pre>