如何在 Datatables.net 单元中设置 React Router <Link>？

【问题标题】：How to setup React Router <Link> inside a Datatables.net Cell?如何在 Datatables.net 单元中设置 React Router <Link>？
【发布时间】：2019-06-14 15:13:40
【问题描述】：

我有一个数据表 (https://datatables.net) 初始化如下：

 $('#example').DataTable({
 data: data,
 columns: [{
             title: "Database ID",
             data: 'database_id',
             render: function (data, type, row) {
                       return '<NavLink to="/shop">'+ data +'</NavLink>';
                    }
            }]
 });

由于 React-Router（整个函数位于 React 组件内），我在代码中拥有的 NavLink 应该将数据库单元格呈现为可点击的链接，但是当我运行代码时链接不会呈现。

我最终想要的是能够单击数据库单元格，通过路由到“/shop/id”之类的链接将我带到另一个组件，但我被困了很长时间。救命！

【问题讨论】：

标签： reactjs datatables react-router

【解决方案1】：

我遇到了同样的问题，下面的解决方案对我有用。

您可以直接将 带有 href 的锚标记添加到您要在点击时路由的路径。但是，它会重新加载您的应用程序。

为避免重新加载应用程序，请尝试以下解决方案。
当您动态初始化列时，您可以为想要链接的列添加以下代码。

fnCreatedCell: (nTd, data) => ReactDOM.render(
                            <a
                                onClick={() => handletableclick(data, props)}>
                                {data}
                            </a>, nTd)

在文件中添加 handletableclick() 函数/方法以处理点击事件，并通过历史记录以编程方式推送您想要在点击时路由的路径

function handletableclick(data, props) {
     props.history.push("/pathToRoute=" + data);
}

另外，在上面的代码中从 props 访问历史，你需要用 withRouter 封装你的组件如下：

export default withRouter(YourComponentName);

【讨论】：