如何在 React js 中的单个 pare 应用程序中制作可抓取链接

Question

我正在用 nextjs 和 reactjs 制作一个网站。网站是这个https://www.codingconquerors.com/。当我检查灯塔报告时，它给我一个错误“links 不可抓取”。这是一个水疗中心。从过去的 4 天开始，我几乎在谷歌上搜索，但仍然无法找到解决方案。下面的代码显示导航栏：

{navigation.map((item) => (
                <Link
                  spy={true}
                  smooth={true}
                  key={item.name}
                  to={item.href}
                  className="font-medium text-gray-500 hover:text-gray-900"
                >
                  {item.name}
                </Link>
              ))}

上面的link标签来自这个import import { Link } from 'react-scroll'

即使我尝试使用 Nextjs Link 标签而不是 reactjs，它仍然没有解决问题。

在 link 标签后面生成的源代码没有显示 href 标签的使用。有什么办法可以解决这个 SEO 问题吗？或者我不得不忍受这个，因为它是一个 SPA。

Answer 1

此问题与上述标签无关，在查看 lighthouse 报告后，我发现 header 中的导航链接是没有链接的锚标签，这导致了以下问题。

这些是什么：

Answer 2

我不得不在不使用 # 的情况下正常显示 link 标签，然后不得不在 react 中添加 onclick 事件，该事件将 # 附加在标签值的前面。我不确定该方法是否正确，但它解决了我的 SEO 报告。现在是 100%

如何在 React js 中的单个 pare 应用程序中制作可抓取链接

How to make crawlable links in a single pare application in react js

reactjs

next.js

seo