Passing data on another page by clicking the row: It shows that data is null

Question

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.

Answer 1

the navigate function takes up to two arguments, the "to" target and an "options" object with state and replace keys.

useNavigate

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 || {};