Javascript Next.js-如何在HTML属性中使用URL参数？_Javascript_Reactjs_Next.js

Javascript Next.js-如何在HTML属性中使用URL参数？

javascript reactjs next.js

Javascript Next.js-如何在HTML属性中使用URL参数？,javascript,reactjs,next.js,Javascript,Reactjs,Next.js,在我的Next.js应用程序中，我无法从URL查询到HTML属性值我的目标是在与facebook共享页面时显示动态og:image。图像中的文本应根据URL参数值进行更改因此，如果我的URL带有如下查询： https://myappname.vercel.app/result?score=45 import Head from "next/head"; import { useRouter } from "next/router"; export

在我的Next.js应用程序中，我无法从URL查询到HTML属性值

我的目标是在与facebook共享页面时显示动态og:image。图像中的文本应根据URL参数值进行更改

因此，如果我的URL带有如下查询：

https://myappname.vercel.app/result?score=45

import Head from "next/head";
import { useRouter } from "next/router";

export default function Result({ scoreValue }) () {

let encodedURL = encodeURIComponent(scoreValue);

  return (
    <>
      <Head>
        <meta property="og:url" content="https://myapp.com" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="app title" />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="627" />
        <meta
          property="og:image"
          content={`https://ik.imagekit.io/hk6nkvbz2x/default-image.jpg/tr:ot-${encodedURL},ots-150,otc-FFFFFF`}
        />
      </Head>
      <div>
        <img
          src={`https://ik.imagekit.io/hk6nkvbz2x/default-image.jpg/tr:ot-${encodedURL},ots-150,otc-FFFFFF`}
          alt=""
        />
      </div>
    </>
  );
}

Result.getInitialProps = async function ({ query }) {
  const { score } = query;
  return { scoreValue: score };
};

我想从URL获取分数，并将此og:图像共享到facebook（ot应更改为45）：

代码示例：

import Head from "next/head";
import { useRouter } from "next/router";

export default function () {

  const router = useRouter();

  const { score } = router.query;

  return (
    <>
      <Head>
        <meta property="og:url" content="https://myapp.com" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="app title" />
        <meta
          property="og:image"
          content={`https://ik.imagekit.io/hk6nkvbz2x/default-image.jpg/tr:ot-${score},ots-150,otc-FFFFFF`}
        />
      </Head>
      <div>
        <img
          src={`https://ik.imagekit.io/hk6nkvbz2x/default-image.jpg/tr:ot-${score},ots-150,otc-FFFFFF`}
          alt=""
        />
      </div>
    </>
  );
}

但是

router.query返回您所在页面内的查询参数。确保在正确的页面上使用该组件。

const queryString = router.asPath;

<div>{queryString}</div> // <div>/result%score=45</div>

console.log(queryString); // /result%score=45

const queryString = router.asPath;

<div className={queryString}></div> // <div class="/result"></div>

import Head from "next/head";
import { useRouter } from "next/router";

export default function Result({ scoreValue }) () {

let encodedURL = encodeURIComponent(scoreValue);

  return (
    <>
      <Head>
        <meta property="og:url" content="https://myapp.com" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="app title" />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="627" />
        <meta
          property="og:image"
          content={`https://ik.imagekit.io/hk6nkvbz2x/default-image.jpg/tr:ot-${encodedURL},ots-150,otc-FFFFFF`}
        />
      </Head>
      <div>
        <img
          src={`https://ik.imagekit.io/hk6nkvbz2x/default-image.jpg/tr:ot-${encodedURL},ots-150,otc-FFFFFF`}
          alt=""
        />
      </div>
    </>
  );
}

Result.getInitialProps = async function ({ query }) {
  const { score } = query;
  return { scoreValue: score };
};