La versión de react-router-dom es v6 y tengo problemas para pasar valores a otro componente usando Navigate.
Quiero pasar las filas seleccionadas a otra página llamada Informe. Pero no estoy seguro de estar usando la sintaxis correcta para el método de navigate y no sé cómo obtener ese estado en el componente Informe.
Tabla Material-ui: estoy tratando de usar redirectToReport(rowData) en el parámetro onClick .
function TableRows(props){ return ( <MaterialTable title="Leads" columns={[ ... ]} data = {props.leads} options={{ selection: true, filtering: true, sorting: true }} actions = {[{ position: "toolbarOnSelect", tooltip: 'Generate a report based on selected leads.', icon: 'addchart', onClick: (event, rowData) => { console.log("Row Data: " , rowData) props.redirect(rowData) } }]} /> )}Componente LeadTable
export default function LeadTable(props) { let navigate = useNavigate(); const [leads, setLeads] = useState([]); const [loading, setLoading] = useState(true); async function fetchUrl(url) { const response = await fetch(url); const json = await response.json(); setLeads(json[0]); setLoading(false); } useEffect(() => { fetchUrl("http://localhost:5000/api/leads"); }, []); function redirectToReport(rowData) { navigate('/app/report', { state: rowData }); // ??? I'm not sure if this is the right way } return( <div> <TableRows leads={leads} redirect={redirectToReport}></TableRows> </div> )}Componente de informe
export default function ReportPage(state) { return ( <div> { console.log(state) // This doesn't show anything. How to use the state that were passed from Table component here?} <div className = "Top3"> <h3>Top 3 Leads</h3> <ReportTop3 leads={[]} /> </div> </div> );}versión 6 reaccionar-router-dom
Sé que se respondió la pregunta, pero creo que este podría ser un ejemplo útil para aquellos que desean usar componentes funcionales y buscan pasar datos entre componentes usando react-router-dom v6.
Supongamos que tenemos dos componentes funcionales, primero el componente A, segundo el componente B. El componente A quiere compartir datos con el componente B.
uso de ganchos: (useLocation,useNavigate)
import {Link, useNavigate} from 'react-router-dom'; function ComponentA(props) { const navigate = useNavigate(); const toComponentB=()=>{ navigate('/componentB',{state:{id:1,name:'sabaoon'}}); } return ( <> <div> <a onClick={()=>{toComponentB()}}>Component B<a/></div> </> ); } export default ComponentA;Ahora obtendremos los datos en el Componente B.
import {useLocation} from 'react-router-dom'; function ComponentB() { const location = useLocation(); return ( <> <div>{location.state.name}</div> </> ) } export default ComponentB;Nota: puede usar HOC si está usando componentes de clase, ya que los ganchos no funcionarán en los componentes de clase.
Su navigate('/app/report', { state: rowData }); me parece correcto
Si necesita un estado, use
navigate('success', { state }).
Su ReportPage debe representarse en el mismo Router en el que se encuentra el componente que realiza la inserción.
Las propiedades de ruta ya no se pasan a los componentes representados, ya que ahora se pasan como literales JSX. Para acceder al estado de la ruta, debe hacerlo a través del useLocation .
function ReportPage(props) { const { state } = useLocation(); console.log(state); return ( <div> <div className = "Top3"> <h3>Top 3 Leads</h3> <ReportTop3 leads={[]} /> </div> </div> ); } Si el componente no puede usar ganchos React, aún puede acceder al estado de la ruta a través de un componente personalizado de withRouter superior de enrutador. Aquí hay un ejemplo simple con el withRouter HOC para pasar la location como accesorio.
const withRouter = WrappedComponent => props => { const location = useLocation(); return <WrappedComponent {...props} location={location} />; };Luego acceda a través de accesorios como se hizo en pre-RRDv6.
function ReportPage(props) { console.log(props.location.state); return ( <div> <div className = "Top3"> <h3>Top 3 Leads</h3> <ReportTop3 leads={[]} /> </div> </div> ); }En la respuesta de Sabaoon Bedar , puede verificar si hay algún dato o no antes de mostrarlo:
En lugar de esto <div>{location.state.name}</div>
¿Hacer esto { location != null ? <div>{location.state.name}</div> : ""}
2 cosas (solo una sugerencia): en lugar de un uso ternario &&
{location && <div>{location.state.name}</div>}¿Por qué está comprobando la ubicación y representando la ubicación.estado.nombre? Usaría la verificación de los datos que está obteniendo o me aseguraría de que los datos devuelvan un valor nulo o su valor.