title: React routing - id params in the URL is undefined when I pass it with history.push
body: <p>I managed to to use history.push in an onClick as I want to pass the user id to a Profile page component but the uuid params in the URL is undefined and I don't know why. I'm really stuck at this part.</p>
  
  <p>I also want to pass all the other props which I get from the Random User Generator API as I'm doing in CardList to be able to build the profile page.</p>
  
  <p>Would definitely appreciate anyone’s help.</p>
  
  <pre><code>import React, { Fragment } from "react";
  import { withRouter } from "react-router-dom";
  
  const Card = ({ history, firstName, lastName, email, uuid, image, city, country }) =&gt; {
    return (
      &lt;Fragment&gt;
        &lt;div className="tc bg-washed-green dib br3 pa3 ma2 dim bw2 shadow-5 pointer"&gt;
          &lt;img src={image} alt="userImage" onClick={() =&gt; history.push(`/profilepage/${uuid}`)} /&gt;
          &lt;h2&gt;{`${firstName} ${lastName}`}&lt;/h2&gt;
          &lt;p&gt; {email} &lt;/p&gt;
          &lt;div&gt;
            &lt;span&gt;{`${city}, ${country}`}&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/Fragment&gt;
    );
  };
  
  export default withRouter(Card);
  </code></pre>
  
  <pre><code>import React, { Fragment } from "react";
  
  const ProfilePage = ({ uuid }) =&gt; {
    return (
      &lt;Fragment&gt;
        &lt;h1 className="f1"&gt;Profile Page: {uuid}&lt;/h1&gt;
      &lt;/Fragment&gt;
    );
  };
  
  export default ProfilePage;
  </code></pre>
  
  <p>and this is the Routing in App.js</p>
  
  <pre><code>render() {
      const { users, isPending } = this.props;
      if (isPending) {
        return &lt;h1 className="tc"&gt; Loading... &lt;/h1&gt;;
      } else {
        return (
          &lt;div className="tc"&gt;
            &lt;Switch&gt;
              &lt;Route exact path="/homepage" render={() =&gt; &lt;CardList users={users} /&gt;} /&gt;
              &lt;Route path="/profilepage/:uuid" component={ProfilePage} /&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
        );
      }
    }
  }
  </code></pre>
  
  <pre><code>import React, { Fragment } from "react";
  import Card from "./Card";
  
  const CardList = ({ users }) =&gt; {
    return (
      &lt;Fragment&gt;
        &lt;h1 className="f1"&gt; IOTA Users &lt;/h1&gt;
        {users.map((user) =&gt; {
          return (
            &lt;Card
              key={user.login.uuid}
              image={user.picture.large}
              firstName={user.name.first}
              lastName={user.name.last}
              email={user.email}
              city={user.location.city}
              country={user.location.country}
            /&gt;
          );
        })}
      &lt;/Fragment&gt;
    );
  };
  
  export default CardList;
  </code></pre>