title: How to pass data from a page to another page using react router
body: <p>Please I need help on react-router-dom, I am new to the library and can seem to find any solution since. I am getting three results from an api call, in which I map over the data to render it on UI, now what I need now is that if I click on a row on one of this list, I want it to take me to a screen showing the details of only that single thing I clicked on.</p>
  
  <pre><code>import React, { Component } from "react";
  
  export default class User extends Component {
    state = { userDetails: "" };
  
    componentDidMount() {
      axios.get(`https://urlforapi.com`)
      .then(({ data }) =&gt; {
        this.setState({
          userDetails: data
        });
      });
    }
  
    render() {
      const { userDetails } = this.state;
      return (
        &lt;div&gt;
          {userDetails
            ? userDetails.map(info =&gt; {
                return (
                  &lt;Link to="/home/userDetails"&gt;
                    &lt;div key={info.id}&gt;
                      &lt;p&gt;{info.name}&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div&gt;
                      &lt;p&gt;{info.age}&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div&gt;
                      &lt;p&gt;{info.description}&lt;/p&gt;
                    &lt;/div&gt;
                  &lt;/Link&gt;
                );
              })
            : null}
        &lt;/div&gt;
      );
    }
  }
  
  
  </code></pre>