Tengo dos páginas, quiero pasar datos de un componente funcional al otro, estoy tratando de lograr esto usando <Link/> pero no sé cómo recuperaría esto en mi otra página:
aquí está mi código:
Primera página:
const CustomerListResults = () => { <Link to={{ pathname: "/app/CustomerDetails", data: id // your data array of objects }}> <Button color="primary" variant="contained" > Expand </Button> </Link> }Mi segunda página en la que necesito los datos:
const CustomerProfile = () => { // here i want to get the id i passed in the <Link/> component }mi archivo Routes.js:
const routes = [ { path: 'app', element: <DashboardLayout />, children: [ { path: 'account', element: <Account /> }, { path: 'customers', element: <CustomerList /> }, { path: 'CustomerDetails', element: <CustomerDetails /> }, { path: 'ReportDetails', element: <ReportDetails /> }, { path: 'report', element: <ReportList /> }, { path: 'freight', element: <FreightList /> }, { path: 'dashboard', element: <Dashboard /> }, { path: 'analytics', element: <Analytics /> }, { path: 'products', element: <ProductList /> }, { path: 'settings', element: <Settings /> }, { path: '*', element: <Navigate to="/404" /> } ] }, { path: '/', element: <MainLayout />, children: [ { path: 'login', element: <Login /> }, { path: 'register', element: <Register /> }, // { path: '404', element: <NotFound /> }, { path: '/', element: <Navigate to="/login" /> }, { path: '*', element: <Navigate to="/app/dashboard" /> } ] } ]; export default routes;Si no me equivoco, desea pasar datos de Páginas vinculadas con el Enrutador, Ruta y Enlace.
Para lograr eso, uso 'react-router-dom' en lugar de 'react-router'.
Cuando estoy en una página y presiono programáticamente otra con: history.push(), incluso puede pasar el estado, y dentro de eso puede poner cualquier objeto que desee.
Para recuperarlo en la otra página, debe usar: useLocation().state
Devolverá el objeto de estado pasado antes. Así que básicamente puedes ir como:
history.push({ubicación:"ruta/a/siguiente/página", estado : { obj : "valor1",obj2 : "valor2"});
y en la página siguiente puede desestructurar al principio como:
const {obj,obj2} = useLocation().state;
Lo siento, no puedo usar el "modo de código" porque soy del móvil.