Why Am I Not Able to Access state Through a Link Component?

Question

I've tried making tons of small changes to this code snippet (extra curly braces, changing ':' to '=' in the Link component code, and still location.state is null is on the ReportEdit component I'm trying to pass state to. Is this not something that is possible in React Router Dom 6.2.1?

Here's the code

Component drawing the link

<Link 
  to={`/report/${report.id}/edit`}
  state={{hi: "hi"}}>
 <Button>
    Edit
 </Button>
</Link>

Linked component I want to pass state to

import { Form, Button } from 'react-bootstrap'
import { Link, useParams, useLocation } from 'react-router-dom'
import axios from 'axios';

const ReportEdit = props => {

  const [report, setReport] = useState([]);
  const [ rep_type, setRepType ] = useState(report.rep_type);
  const [ rep_count, setRepCount ] = useState(report.rep_count);

  let params = useParams()
  const location = useLocation()

  console.log(location.state) // <--- always 'null'

  const id = params.id

  //async function handleSubmit() {
    //let data = await axios.put(`http://localhost:3001/reports/${id}`)
   // if (data) {
     // console.log(data.data.report)
    //}
  //}

  return (
    <div>
      <Form onSubmit={e => handleSubmit(e)}>
        <Form.Group className="mb-1" controlId="rep_type">
          <Form.Control 
            type="text" 
            placeholder={props.rep_type}
            name="rep_type"
            value={rep_type}
            onChange={e => setRepType(e.target.value)} 
          />
        </Form.Group>

        <Form.Group className="mb-1" controlId="rep_count">
          <Form.Control 
            type="number" 
            placeholder={props.rep_count} 
            name="rep_count"
            value={rep_count} 
            onChange={e => setRepCount(e.target.value)} 
          />
        </Form.Group>
      <Button variant="primary" type="submit">Submit</Button>
    </Form>
  </div>
  )
}

export default ReportEdit;

Answer 1

You can reference to the official react-router-dom document , you can pass params through object, for example:

<Link
  to={{
    pathname: `/report/${report.id}/edit`,
    state: { id: report.id }
  }}
/>

Answer 2

I figured it out.

I was only refreshing the target page in development, and I needed to actually be using the link to pass props via state. fml.