Блог

Я использую react router и gridjs и хочу отобразить ссылку в ячейке, которую пользователь может щелкнуть, чтобы перейти на страницу сведений.

В качестве первого подхода я попробовал использовать форматировщик столбцов:

 import { Link } from "react-router-dom";
import { Grid } from 'gridjs-react';

const linkFormatter = (cell, row) =>
  _(
    <Link to={`/jobs/${row.cells[1].data}`} className="font-bold">
      {cell}
    </Link>
  );

...

<Grid
  data={[
    ['Job A', '123'],
    ['Job B', '124']
  ]}
  columns={{
    {name: 'Name', formatter: linkFormatter},
    'Job Id'}}
/>
 

Я получаю следующую ошибку:
Error: Invariant failed: You should not use <Link> outside a <Router>

Вот еще один подход, который я пытался использовать useHistory :

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

const CellLink = ({ item }) => {
  let history = useHistory();
  function handleClick() {
    history.push(`/jobs/${item.jobId}`);
  }
  return (
    <button onClick={handleClick} className="font-bold">
      View
    </button>
  );
};

...

<Grid
  data={data.map((item) => ({
    ...item,
    button: _(<CellLink item={item} />),
  }))}
  columns={columns}
/>
 

Если я использую CellLink вне сетки в том же компоненте, это работает, но если я использую его внутри ячейки, я получаю TypeError: Cannot read property 'push' of undefined .

Есть ли способ заставить <Link /> или history из react-router работать внутри ячейки gridjs? Любые советы будут с благодарностью.

Отправьте историю в качестве реквизита в CellLink

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

const CellLink = ({ item, history }) => {
  function handleClick() {
    history.push(`/jobs/${item.jobId}`);
  }
  return (
    <button onClick={handleClick} className="font-bold">
      View
    </button>
  );
};

...

const WrapperComponent = () => {
  let history = useHistory();
  return (
    <Grid
      data={data.map((item) => ({
        ...item,
        button: _(<CellLink item={item} history={history} />),
      }))}
      columns={columns}
    />
  )
}