Go к ссылке при нажатии внутри Table.Row с onClick

Question

У меня есть таблица, и я хочу, чтобы каждая строка была интерактивной, а при нажатии на нее go переходил по этой ссылке (которая отличается для каждой строки).

<Table.Body>
  {rows.map((row, rowIndex) => (
    <Table.Row
      key={idList && idList[rowIndex]}
      onClick={() => {
        <Link
          to={
            entityName && `/${entityName}/${idList[rows.indexOf(row)]}`
          }
        />;
      }}>
      ...
    </Table.Row>
  ))}
</Table.Body>

Итак, я сделал, как указано выше, добавил компонент, но не работает. В нем говорится:

Ожидается присвоение или вызов функции, а вместо этого отображается выражение no-unused-expressions

Я использую Table / Table.Row из Semantic UI и Link от react-router-dom. Я не могу изменить Table, но компонент Link не является обязательным. В любом случае было бы здорово, если бы он мог перенаправлять на эту ссылку при нажатии.

Есть ли способ сделать это?

Answer 1

Один из способов - использовать историю для перехода от компонента. Чтобы получить объект истории, вам нужно либо использовать хук useHistory(), который доступен из response-router: 5.1.0 , либо, если вы используете старую версию response-router

1. вам нужно будет добавить метод, который это сделает:

Functional

const onNavigate = (entityName, idList) => () => {
  entityName && history.push( && `/${entityName}/${idList[rows.indexOf(row)]}`) // change accordingly 
}

Class

onNavigate = (entityName, idList) {
  return function () {
    return entityName && this.props.history.push( && `/${entityName}/${idList[rows.indexOf(row)]}`) // change accordingly 
  }
}

Этот метод возвращает ссылку на функцию, так что опора onCLick не запускает ее при рендеринге, а some_props будет виден во внутренней функции благодаря замыканиям

вы передаете метод методу onClick:

<Table.Body>
  {rows.map((row, rowIndex) => (
    <Table.Row
      key={idList && idList[rowIndex]}
      onClick={onNavigate(enitityName, idList)}
    >
      ...
    </Table.Row>
  ))}
</Table.Body>

таким образом обработчик кликов получит ссылку на функцию и должен перейти по соответствующему URL-адресу

Answer 2

Используя react-router для ссылки внутри приложения реакции, вы можете использовать хук useHistory и pu sh новый путь.

import { useHistory } from "react-router-dom";

function Component() {
  let history = useHistory();

  return (
    <Table.Body>
      {rows.map((row, rowIndex) => (
        <Table.Row
          key={idList && idList[rowIndex]}
          onClick={() =>
            history.push(
              entityName && `/${entityName}/${idList[rows.indexOf(row)]}`
            )
          }
        >
          ...
        </Table.Row>
      ))}
    </Table.Body>
  );
}