Soy nuevo en reaccionar, tengo un componente UpdateInvoice que tiene como accesorios idInvoice y un booleano isNew . este componente hace dos cosas si isNew es verdadero, el componente agregará una nueva factura; de lo contrario, actualizará una factura existente identificada por su idInvoice .

También tengo el componente ListInvoices . Quiero que cuando haga clic en el botón "NUEVA FACTURA" en este componente, pueda llamar a mi UpdateInvoice de actualización, así que utilicé React Router .

El problema

¡Los accesorios que envío desde ListInvoices a UpdateInvoice están vacíos!

en index.tsx

 root.render( <BrowserRouter> <Routes> <Route path="/" element={<App />} /> <Route path="UpdateInvoice" element={<UpdateInvoice {...{idInvoice:'', isNew: null}} />} /> </Routes> </BrowserRouter>, );

en ListInvoices.tsx

 <Button variant="contained" className="add" onClick={() => navigate("/UpdateInvoice", {state: {idInvoice: '', isNew: true }})} startIcon={<AddIcon />}> NEW INVOICE </Button>

No puedo enviar los accesorios correctos desde index.tsx porque ListInvoices que tiene idInvoice y isNew information

ACTUALIZAR :

ListaFacturas.tsx

 const [data, setData] = React.useState([] as any[]); //when the user is authenticated using an api, I update headers value const [headers, setHeaders] = React.useState( { 'Authorization': ``, 'My-Custom-Header': '' }); useEffect(() => { if(headers.Authorization != ''){ getData(); // I fetch data from an api } }, [headers]) const columns: GridColDef[] = [ { field: 'idInvoice', headerName: 'ID', minWidth: 160 }, //more columns.. ] return ( <div> <Button variant="contained" className="add" onClick={() => navigate("/UpdateInvoice", {state: {idInvoice: '', isNew: true }})} startIcon={<AddIcon />}> NEW INVOICE </Button> <Paper sx={{width: '100%', p:1}} component="ul"> <div style={{ height: 400, width: '100%'}}> {data.length != 0 ? <DataGrid rows={data} columns={columns} pageSize={5} rowsPerPageOptions={[5]} /> : <CircularProgress className='progress'/>} </div> </Paper> </div> );