title: How to redirect a link using History to a page
body: <p>In my React app, I added <code>useHistory</code> to be able from my page Rovers to be redirect <code>onClick</code> of a button to one specific page. That button is contained inside 3 divs where onClick takes the name of the Rover and open the right page related to that Rover selected.</p>
  
  <p>On that page, I would like to add 2 links which will redirect to the other 2 Rovers so the user no need to back to the Rovers page all the time. </p>
  
  <p>My issue I'm getting this error:</p>
  
  <pre><code>TypeError: Cannot read property 'roverName' of undefined 
  </code></pre>
  
  <p>The code flow is as follow:</p>
  
  <p>The rover button onClick is inside my Card component which shows the rover info and where I'm using History below</p>
  
  <pre><code>export default function CardComponent({
    name
    // other props
  }) {   
    const history = useHistory();
  
    const redirectToRoverPage = () =&gt; {
      return history.push({
        pathname: `/mars-rovers/rover/${name}`,
        state: { roverName: name },
      });
    };
  
    return (
      &lt;Col md={4} className="mb-5"&gt;
        &lt;Card className="border-black mt-3"&gt;
            {/* some rover content here */}
            &lt;Button variant="success" onClick={() =&gt; redirectToRoverPage()}&gt;
              ENTER
            &lt;/Button&gt;
          &lt;/Card.Body&gt;
        &lt;/Card&gt;
      &lt;/Col&gt;
    );
  }
  </code></pre>
  
  <p>Then inside my Rover page where I use 2 components</p>
  
  <p>Index</p>
  
  <pre><code>export default function Rover(data) {
    const [isLoading, setIsLoading] = useState(true);
  
    useEffect(() =&gt; {
      Delayed.delay(() =&gt; {
        setIsLoading(false);
      }, 3000);
    });
  
    const roverName = `${data.location.state.roverName}`;
    return isLoading ? (
      &lt;RoversLoader /&gt;
    ) : (
      &lt;Container&gt;
        &lt;RoverIntro roverName={roverName} /&gt;
      &lt;/Container&gt;
    );
  }
  </code></pre>
  
  <p>RoverIntro</p>
  
  <pre><code>export default function RoverIntro({ roverName }) {
    return (
      &lt;JumboTronWrapper&gt;
        &lt;Jumbotron className="jumbotron-intro"&gt;
          &lt;div className="d-flex align-items-center"&gt;
            &lt;h1&gt;{roverName}&lt;/h1&gt;
            &lt;span className="ml-auto"&gt;
              &lt;Link to="/mars-rovers"&gt;Rovers&lt;/Link&gt;
              &lt;Link to="/mars-rovers/rover/Curiosity"&gt;Curiosity&lt;/link&gt; &lt;-- Here clicking give me that error I showed above --&gt;
              OTHER LINKS 
            &lt;/span&gt;
          &lt;/div&gt;
          &lt;RoverText roverName={roverName} /&gt;
        &lt;/Jumbotron&gt;
      &lt;/JumboTronWrapper&gt;
    );
  }
  </code></pre>
  
  <p>What I would like to understand as the first time I'm using History what should I do to permit the redirect from one Rover page to another rover page. </p>
  
  <p>I want to avoid going back to mars-rovers main page all the time and allow a user to go directly to the other rover.</p>
  
  <p>If you need it I can show more codes regarding this flow.</p>