0

我正在使用反应路由器和 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}
/>

如果我在同一个组件中在 Grid 之外使用 CellLink，它可以工作，但如果我在单元格中使用它，我会得到TypeError: Cannot read property 'push' of undefined.

<Link />有没有办法让historyreact-router 在单元格 gridjs 中工作？任何建议将不胜感激。

4

1 回答 1

0

将历史作为道具发送到 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}
    />
  )
}
于 2021-11-19T13:02:36.073 回答