Por el momento, tengo las siguientes rutas en mi archivo App.js :

 <Switch> <Route exact path="/new-job" render={(props) => <NewJob jobName={jobName} setMenuSelection={handleMenuSelection} />} /> <Route exact path="/past-jobs" render={(props) => <PastJobs setMenuSelection={handleMenuSelection} />} /> </Switch>

Ahora, dentro de mi componente PastJobs , tengo el siguiente botón con el proceso onClick:

 <Button onClick={() => { setConfirmDialog({ isOpen: true, title: `Copy Job ${item.id}?`, onConfirm: () => { onCopy(item.job_info) } }) }} > Copy </Button>

que llama a la siguiente función:

 const onCopy = (job_info) => { setConfirmDialog({ ...confirmDialog, isOpen: false }) history.push({ pathname: '/new-job', state: { detail: job_info } }) }

Dentro de mi <NewJob /> , ahora configuré lo siguiente porque pensé que podía acceder a state.detail pero desafortunadamente es nulo, es decir:

 import { useLocation } from 'react-router-dom'; function NewJob( { jobName, setMenuSelection } ) { const { state } = useLocation(); if (typeof state !== 'undefined') { const myVal = state.detail console.log("myVal", myVal ) } }

El problema que tengo y no estoy seguro de cómo abordarlo es que dentro de mi función onCopy que se llama desde el botón onClick, ¿cómo llamo al componente <NewJob /> cuya ruta es exact path="/new-job" en App. js arriba y pase el accesorio job_info ?