useRouter replace 携带参数

使用 `useRouter` 的 `replace` 方法可以实现在路由跳转时携带参数。以下是一个示例代码：

import { useRouter } from 'next/router';

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

  const handleClick = () => {
    router.replace({
      pathname: '/myPage',
      query: { id: 123 }, // 携带的参数
    });
  };

  return (
    <div>
      <button onClick={handleClick}>跳转到 myPage 页面</button>
    </div>
  );
};

export default MyComponent;

在上述示例中，当点击按钮时，会调用 `handleClick` 方法，该方法使用 `router.replace` 进行页面跳转。在 `replace` 方法的参数中，`pathname` 指定了目标页面的路径，`query` 则用来携带参数。在这个例子中，参数为 `{ id: 123 }`。

这样，当页面跳转后，你可以在目标页面中使用 `useRouter` 的 `query` 属性来获取携带的参数。例如，在 `myPage` 页面中可以这样获取参数：

import { useRouter } from 'next/router';

const MyPage = () => {
  const router = useRouter();
  const { id } = router.query; // 获取携带的参数

  return (
    <div>
      <h1>My Page</h1>
      <p>参数 id 的值为: {id}</p>
    </div>
  );
};

export default MyPage;

这样就可以实现使用 `useRouter` 的 `replace` 方法携带参数进行页面跳转了。