在 React 数据表调用组件中创建可点击行，重定向到 NextJS 中的新页面

Question

我正在使用 NextJS 15.0。我有一个 React 数据表组件（版本 7.6.2），并且我已将行设置为可单击。当用户单击一行时，它会调用一个名为 onHandleClick 的函数。这是代码...

<DataTable
  onRowClicked={onHandleClick}
/>

这是 onHandleClick 函数的样子...

const onHandleClick = (row:any) => {
  const router = useRouter();
  router.push("/");
}

我希望发生两件事：

首先，我想将用户（单击该行后）重定向到新页面或我想要加载一个新组件...

和

第二，我希望数据（onHandleClick 函数中的参数row）传递到新页面/组件，以便我可以使用要显示给用户的数据填充页面/组件。

我尝试了上面的代码，但在浏览器中收到了 Invalid Hook Call 错误。当我单击数据表中的任何行时，它不会重定向我。

这是我尝试解决此问题的方法：

我尝试在函数调用中使用 UseEffect()。

我尝试使用 onClick 作为组件内的参数。

这些努力并没有解决问题。有人有什么建议吗？

提前致谢！

Answer 1

出现“Invalid Hook Call”错误是因为像

useRouter

这样的钩子无法在常规函数中调用。在组件内部使用它们。

代码应该与此类似：

const MyComponent = () => {
  const router = useRouter();

  const onHandleClick = (row) => {
    // Redirect to a new page and pass data as query parameters
    router.push({
      pathname: '/newPage', // Replace with your target page
      query: { data: JSON.stringify(row) }, // Pass data as a query parameter
    });
  };

  return (
    <DataTable
      onRowClicked={onHandleClick}
      // other DataTable props
    />
  );
};

试一试，如果有效请告诉我！