Как перейди на другую страницу по клику на строку в useTable

Сделал таблицу в useTable. А как по клику на сообщение (т.е. на строку row) переходить на другую страницу? куда только Link не добавлял.

const COLUMNS = [
    {
      Header: "Дата",

      accessor: "createdAt",
      disableFilters: true,
      sticky: "left",
      Cell: ({ value }) => {
        return format(new Date(value), "dd/MM/yyyy");
      },
    },
    {
      Header: "Ф.И.О.",

      accessor: "ownerFullName",
      sticky: "left",
    },
    {
      Header: "Модель",

      accessor: "type",
      sticky: "left",
    },
    {
      Header: "Цвет",

      accessor: "Цвет",
    },
    {
      Header: "Delete",
      id: "_id",
      accessor: "_id",

      Cell: (tableProps) => (
        <img
          src={del2}
          className="delete"
          onClick={() => deleteRow(tableProps)}
        ></img>
      ),
    },
  ];

  const columns = useMemo(() => COLUMNS, []);

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    selectedFlatRows,
  } = useTable({
    columns,
    data,
  });

  return (
    <>
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>{column.render("Header")}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row) => {
            prepareRow(row);

            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  console.log(cell);
                  return (
                    <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    </>
  );

Ответы (1 шт):

Автор решения: SwaD

В компонент добавляем хук useNavigate и функцию для обработки события нажатия кнопки мыши(клик):

  const route = useNavigate();

  const hClick = (link) => {
    route(link); // Меняем link
  };

В tr добавляем событие onClick в котором вызываем фукнцию и передаем нужный линк(в примере ниже `/${row.id}`, это просто пример, надо поменять на вашу нужную ссылку)

<tr  onClick={() => hClick(`/${row.id}`)}  {...row.getRowProps()}>

Либо можно обойтись без фукнции hClick так:

<tr  onClick={() => route(`/${row.id}`)}  {...row.getRowProps()}>
→ Ссылка