React Hook 在 Next.js AMP 页面中不起作用答案

【问题标题】：React Hook not working in Next.js AMP pageReact Hook 在 Next.js AMP 页面中不起作用
【发布时间】：2020-11-25 17:02:43
【问题描述】：

为什么以下内容会从 amp 呈现的页面中排除？

反应生命周期方法
响应回调，如 onClick
反应钩子

我真正的问题是，如果我在此页面上启用 AMP（取消注释第 3 行），将不会打印 router.query.title。

import { useRouter } from 'next/router';

import withLayout from 'components/MyLayout';

//export const config = { amp: true };

const Content = () => {
  const router = useRouter();
  return (
    <React.Fragment>
      <h1>{router.query.title}</h1>
      <p>This is the blog post content.</p>
    </React.Fragment>
  );
};

const Page = () => (
    <Content />
)

export default withLayout(Page);

【问题讨论】：

标签： reactjs next.js amp-html

【解决方案1】：

AMP 页面仅在服务器端呈现，因此诸如反应生命周期方法、挂钩、反应回调等自定义 javascript...无法在客户端运行。所有 javascript 进程仅在服务器上运行并返回 HTML 输出，没有任何反应库或自定义 js 包文件。要创建动态 AMP 网站，您应该考虑 AMP 生态系统并使用 its plugin & component。要处理 AMP 中的状态，您可以使用 amp-bind 组件。

【讨论】：

哇，没想到！那是一件大事。嗯