如何使用来自 antd 表列的 React Router <Link to>答案

【问题标题】：How do I use React Router <Link to> from antd table column如何使用来自 antd 表列的 React Router <Link to>
【发布时间】：2020-07-08 01:14:00
【问题描述】：

我在我的项目中使用 react 路由器和 antd。我正在使用antd。我显示一列并单击此列，我想使用此将用户重新路由到另一个详细信息页面

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

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

谁能帮助我了解如何通过单击表格列中的单元格来让 React Router 将用户路由到另一个页面。

【问题讨论】：

标签： reactjs hyperlink react-router antd

【解决方案1】：

如果你想点击单元格，你可以让你的列定义如下：

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

如果你想点击单元格内的链接，你可以这样：

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

请记住以下几点：

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

【讨论】：

嗨亚瑟，这行得通，const columns = [ {dataIndex: 'email', render: (data) => <Link to="pages/mypage">{data}</Link>} ] 我犯的错误是我输入“pages/myPage”的路径，它应该是“pages/my-page”