Change job id to a link to job show page
I implemented my job ID in datagrid in this way:
import { Link } from "@mui/material";
const columns = React.useMemo<GridColDef[]>(
() => [
{
field: "id",
headerName: "Job ID",
minWidth: 370,
renderCell: function render({ row }) {
const jobId = row?.id;
const jobshowURL =
const handleCopyClick = () => {
// copy the text into clipboard
copyToClipboard(jobId);
window.alert("Job ID copied");
};
return (
<>
<Link href={jobshowURL}>
<TextField value={jobId}/>
</Link>
<IconButton onClick={handleCopyClick} aria-label="Copy">
<FileCopyIcon style={{ fontSize: 16 }}/>
</IconButton>
</>
);
},
},
]
);
for now, I can redirect into the jobshow page after I click the jobID, but it's very slow for the redirecting. Can I use useNavigation() hook or react-dom settings to do the redirect to make it work as fast as Show button
import { Link } from "@mui/material";
const columns = React.useMemo<GridColDef[]>(
() => [
{
field: "id",
headerName: "Job ID",
minWidth: 370,
renderCell: function render({ row }) {
const jobId = row?.id;
const jobshowURL =
/jobs/show/${jobId}const handleCopyClick = () => {
// copy the text into clipboard
copyToClipboard(jobId);
window.alert("Job ID copied");
};
return (
<>
<Link href={jobshowURL}>
<TextField value={jobId}/>
</Link>
<IconButton onClick={handleCopyClick} aria-label="Copy">
<FileCopyIcon style={{ fontSize: 16 }}/>
</IconButton>
</>
);
},
},
]
);
for now, I can redirect into the jobshow page after I click the jobID, but it's very slow for the redirecting. Can I use useNavigation() hook or react-dom settings to do the redirect to make it work as fast as Show button
