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.

CodePudding user response：

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