title: pass props to new page via react-router Link
body: <p>I am trying to pass a prop <code>courseid</code> to a new page when I click the <code>link</code> whilst using <code>react-router-dom</code> But I dont seem to be able to access it. I have tried different ways I have found, but none let me access <code>courseid</code> on the new page</p>
  <p>In <code>courseListItem</code> I have access to <code>props.course.id</code> I have a button that takes me to '/holes'</p>
  <pre><code>&lt;Link
                          to={{
                            pathname: `/holes`, state: {courseid: props.course.id}
                            }} &gt;
                            &lt;button  
                              className=&quot;btn btn-primary tooltips float-left&quot; 
                              data-placement=&quot;left&quot; 
                              data-toggle=&quot;tooltip&quot; 
                              data-original-title=&quot;view&quot;
                              &gt;&lt;i 
                              className=&quot;fa fa-edit&quot;&gt;
  
                              &lt;/i&gt; 
                            &lt;/button&gt;
                        &lt;/Link&gt;
  </code></pre>
  <p>From what I have read, I can use <code>state: {courseid: props.course.id}</code> to pass <code>courseid</code> to the new page, and then on the new page, use <code>location.state.courseid</code> to access courseid.</p>
  <p>Using <code>location.state.courseid</code> on the new page gives me an error <code>unexpected use of location</code></p>
  <p>I found a post saying to use <code>window.location.state.courseid</code> this got rid of the error but when I try and click the button to go to /holes, I get another error <code>Uncaught TypeError: Cannot read properties of undefined (reading 'courseid')</code> so obviously not finding the <code>courseid</code></p>
  <p>Please can someone explain where I am going wrong? Or what is the best way to pass <code>courseid</code> to the new page.</p>
  <p><code>courseid</code> is part of a <code>course</code> object and /holes is a page that has a form on it, but I only need the id so that when I submit the form, it can send the id with the post request to save the holes entered on the form to the correct course.</p>