假设我有这个组件。
import Head from 'next/head';
export const Index: React.FC = () => {
const myUrl = `https://example.com/books/filter/authorName='DavidJames'&inStock=true`;
return (
<Head>
<link rel='canonical' href={myUrl} />
<meta property='og:url' content={myUrl} />
</Head>
);
};
export default Index;
您可以看到该网址包含一个
&View page source&&https://example.com/books/filter/authorName='DavidJames'&inStock=true但是这样做，链接被部分破坏，只有第一个过滤器会被后端代码正确解析。
如何解决这个问题？
编辑：我注意到这个问题仅发生在开发环境中。
您是否尝试过在网址上使用双引号而不是反引号？
const myUrl = "https://example.com/books/filter/authorName='DavidJames'&inStock=true"
也许还可以尝试在
&const myUrl = `https://example.com/books/filter/authorName='DavidJames'\&inStock=true`
从 Firebase 存储加载的“og:image”uri 存在相同问题，导致错误代码 403“权限被拒绝。”