规范的 link 没有显示在 page-source react-helmet 上 reactjs 没有 ssr

Question

我在 page-source 上查看规范 URL 时遇到问题，这是 web-app 页面中的代码


const Index = () => {
  const airportsQuery = useQuery(ALL_AIRPORTS_QUERY, {
    variables: {
      keyword: '',
    },
    skip: true,
    notifyOnNetworkStatusChange: false,
  });

  let timer = null;
  function fetchOptions(inputValue, callback) {
    clearTimeout(timer);

    timer = setTimeout(() => {
      const response = airportsQuery.refetch({ keyword: inputValue });

      response.then(
        ({ data }) => callback(data?.allAirports || []),
        ({ message }) => {
          console.error('Server Error:', message);
        }
      );
    }, 100);
  }

  return (
    <Layout>
      <Layout.Header />
      <Layout.Container width="full">
        <Helmet>
          <meta charSet="utf-8" />
          <title>eeeeee</title>
          <link rel="canonical" href="https://www.biletiniz.com/" />
        </Helmet>
        <HomePage
          fetchOptions={fetchOptions}
          onSubmit={variables =>
            Router.push(`/flight-offers?${qs.stringify(variables)}`)
          }
        />
      </Layout.Container>
      <Layout.Footer />
    </Layout>
  );
};

export async function getStaticProps() {
  const { default: lngDict = {} } = await import(
    `@biletiniz/intl/locales/tr.json`
  );
  return {
    props: { lng: 'tr', lngDict },
  };
}

export default withApollo({
  ssr: false,
})(Index);

当我检查 page-source 时，我找不到 link 或标题我该如何解决？而且我们没有 SSR 如何在 client-side

上渲染头盔

Answer 1

React 使用 DOM 渲染。 DOM 通过 JavaScript 进行了更改，即 与 HTML 源一起发送代码。但是，JS 只能更改 DOM（用户可以看到的内容），不能更改源本身。因此，您应该检查 DOM（在所有主要浏览器中为 F12 或右键单击并检查）而不是页面的源代码。 现代爬虫像Google爬虫检查DOM，而不是源，否则像React这样的单页应用程序不能'看不懂它的内容，因为一切都是通过 JS 渲染的。所以你可以完全保留你的代码。或者在 React 的静态 HTML 文件.

中更改它

规范的 link 没有显示在 page-source react-helmet 上 reactjs 没有 ssr

canonical link doesn't show on page-source react-helmet reactjs no ssr

reactjs

canonical-link

react-helmet