Intenté hacer toneladas de pequeños cambios en este fragmento de código (llaves adicionales, cambio de ':' a '=' en el código del componente de enlace, y todavía la ubicación. El estado es nulo en el componente ReportEdit que estoy tratando de pasar estado a. ¿No es esto algo que es posible en React Router Dom 6.2.1?

aquí está el código

Componente dibujando el enlace

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

Componente vinculado al que quiero pasar el estado

 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;