Question

我有一个数据表表（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”的链接将我带到另一个组件，但是我在其中停留了很长时间。救命！

Answer 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);

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

1 个答案: