I am using MUI-Datatable. And it can already go to the next page, however, no data is showing in History page. How can I fix this?
Passing data to another page:
Here, I can see the data in the console
const handleRowClick = (rowData, rowMeta) => {
navigate("/history", rowData[0]);
console.log(rowData[0], "products");
};
const options = {
filter: true,
selectableRows: "none",
responsive: "simple",
onRowClick: handleRowClick,
};
History page:
Nothing shows in the state
const History = (props) => {
const { state } = useLocation(); //document ID here
console.log(state, "state");
return (
<div>
</div>
);
};
export default History;
App.js
<Route
path="/history"
element={
<PrivateRoute>
<Layout>
<History />
</Layout>
</PrivateRoute>
}
/>
I do not know what is the problem here since I can just pass another data to my edit-page whenever I'll click the button edit which is present in each row.
the navigate function takes up to two arguments, the "to" target and an "options" object with state and replace keys.
declare function useNavigate(): NavigateFunction; interface NavigateFunction { ( to: To, options?: { replace?: boolean; state?: any } // <-- options object, state ): void; (delta: number): void; }
Move the rowData array element into the options object under the state key.
Example:
navigate("/history", { state: { rowData: rowData[0] } });
Use the useLocation hook on the receiving component to access the route state.
const { state } = useLocation();
const { rowData } = state || {};