Question

我希望我的nextjs应用程序具有基于路线的其他图标。 This是我要实现此目标的工作应用程序。我希望无论何时有人访问该国家页面，该图标都将成为该国家的标志。

我的react组件Head标签中包含以下代码：

            <Head>
                <title>{country.name} | {country.subregion}</title>
                <link rel="icon" href={country.flag} />
            </Head>

这有时可能会起作用，但大多数情况下，网站图标未更新或以前的网站图标保持不变。

Answer 1

我遇到的一个问题是您的 <link> 元素必须是 next.js 的 <Head> 元素的直接子元素。这意味着您不能拥有在内部呈现 <Favicon> 元素的 <link> React 元素。相反，您应该将您的 <Favicon {...props}> React 元素作为函数调用，如下所示：

<Head>
  {Favicon({...props})}
</Head>

如何在动态路由的nextjs应用程序中添加动态图标

1 个答案: