Estoy usando MUI-Datatable . Y ya puede ir a la página siguiente, sin embargo, no se muestran datos en la página Historial. ¿Cómo puedo arreglar esto?
Pasar datos a otra página:
Aquí, puedo ver los datos en la console .
const handleRowClick = (rowData, rowMeta) => { navigate("/history", rowData[0]); console.log(rowData[0], "products"); }; const options = { filter: true, selectableRows: "none", responsive: "simple", onRowClick: handleRowClick, }; Página de historial: no se muestra nada en el state
const History = (props) => { const { state } = useLocation(); //document ID here console.log(state, "state"); return ( <div> </div> ); }; export default History;Aplicación.js
<Route path="/history" element={ <PrivateRoute> <Layout> <History /> </Layout> </PrivateRoute> } /> No sé cuál es el problema aquí, ya que puedo pasar otros datos a mi edit-page cada vez que hago clic en el botón edit que está presente en cada fila.
la función de navigate toma hasta dos argumentos, el objetivo "a" y un objeto de "opciones" con teclas de state y replace .
declare function useNavigate(): NavigateFunction; interface NavigateFunction { ( to: To, options?: { replace?: boolean; state?: any } // <-- options object, state ): void; (delta: number): void; }
Mueva el elemento de la matriz rowData al objeto de opciones debajo de la clave de state .
Ejemplo:
navigate("/history", { state: { rowData: rowData[0] } }); Use el useLocation en el componente receptor para acceder al estado de la ruta.
const { state } = useLocation(); const { rowData } = state || {};