我如何使用来自 antd table 专栏的 React Router <Link to>

Question

我在我的项目中使用了 React Router 和 antd。我正在使用 antd。我显示一列并单击此列，我想使用此

将用户重新路由到另一个详细信息页面

<Route>
    {/*<Redirect to="/pages/mypage">*/}
    {/*  {text}*/}
    {/*</Redirect>*/}
    <Link to='/pages/mypage'>
      {text}
    </Link>
  </Route>

这不起作用并给出 404 错误。除了这段代码之外，我还有一个名为 router.js 的文件，其中包含 /pages/mypage

的条目

任何人都可以帮助我了解如何通过单击 table 列中的单元格让 React Router 将用户路由到另一个页面。

Answer 1

如果你想点击单元格，你可以像这样定义你的列：

const columns = [
  {dataIndex: 'email', onCell: () => ({ onClick: () => history.push('/pages/mypage')})}
]

如果要单击单元格内的 link，可以将其设置为：

const columns = [
  {dataIndex: 'email', render: (data) => <Link to="pages/mypage">{data}</Link>}
]

请记住以下几点：

在这两个例子中，我将 dataIndex 作为电子邮件，您应该使用要在该列上呈现的属性的路径名
在render方法中，data是你放在dataIndex上的属性的值，如果dataIndex未定义，data将是整个rowObject。
history 可以从反应路由器中的钩子或上下文访问 hitory.push 与用户单击 link 基本相同，但它可以在反应之外使用流.

我如何使用来自 antd table 专栏的 React Router <Link to>

How do I use React Router <Link to> from antd table column

hyperlink

reactjs

react-router

antd