React - How to show another page on clicking a React Material Datagrid-CodePudding

I am a complete newbie in React. Any help will be greatly appreacited.

I have a React MAterial Datagrid which list of users. When I click a row in the datagrid, it should show the in depth details of the user in another window. I should be able to edit the data, save the data and come back to the data grid again.

Edit: Here the application has a header and a sidebar which should also be displayed when routing to other page happens. The new page should open in the same window with the header and sidebar. In the component I have added in the element={User} I have implemented the logic to display the header and sidebar. The routing does not happen with this code. I find it difficult to identify the mistake I did.

I did implement the code like this and did debugging. The code flows through my function onRowClick, but no component is displayed. Please help me with the mistake I do.

Posting only the part of the code I work:

 const Users = () =>{
    
    

 const handleUserClicked: GridEventListener<"rowClick"> = async ()
..... // Here all the logic to retrieve the data for the Grid is implemented.
}

  const openUserDetails = () => {
    return (
      <div>
        <Routes>
          <Route path="/" element={<User />} />
        </Routes>
      </div>
    );
  };


 return (
    <React.Fragment>
      {selectedCustomer && (
        <p> Ausgewählter Nutzer: {selectedCustomer.Username}</p>
      )}
      <DataGrid
        rows={users}
        columns={columns}
        pageSize={16}
        rowsPerPageOptions={[5]}
        getRowId={(row: any) => row.name}
        autoPageSize={true}
        rowHeight={45}
        onRowClick={handleUserClicked} {...openUserDetails} // I did try even adding on the  onRowClick={openUserDetails}
        hideFooterSelectedRowCount={true}
      />
    </React.Fragment>
  );


}

enter code here

CodePudding user response：

if the result of getRowId is id and this id is equal to your record primary key id you can do like this:

for example, your back-end server for getting post detail is: https://exampl.com/posts/{id}

if you want to see detail in a new tab, you can put the MAU datagird given id into this URL and then open this in a new tab by: window.open('/yourUrl with post id','_blank')

if this description is not your answer, you should ask your questions better

CodePudding user response：

You can navigate to another path by using useNavigate

import { useNavigate } from "react-router-dom";
const navigate = useNavigate();


const openUserDetails = () => {
  navigate("/<your path here>");
};

  <DataGrid
    rows={users}
    columns={columns}
    pageSize={16}
    rowsPerPageOptions={[5]}
    getRowId={(row: any) => row.name}
    autoPageSize={true}
    rowHeight={45}
    onRowClick={openUserDetails}
    hideFooterSelectedRowCount={true}
  />

useNavigate documentation