链接在nextjs的页源中不可见。

Question

我正在尝试在页面源代码中包含我的顶级菜单组件中的链接，但我还没有成功。这是我正在编写的代码：

import React, { useState } from "react";
import Link from "next/link";

import Styles from "./MegaMenuSublist.module.css";

const MegaMenuSublist = (props) => {

  return (
    <React.Fragment>
      {props.mainCategory == "digital" && (
        <div className={Styles.CategoryOptionsList}>
          <div className={Styles.CategorySubListHeadline}>

            {/* <a href="#"> */}
            <a href="/main-category/digital/">

              <svg
                className={Styles.SubListHeadlineChevLeft}
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M15 19l-7-7 7-7"
                />
              </svg>
              هall cat

            </a>
            {/* */}
          </div>
          <ul>
            <li className={Styles.SubListTitle}>
                <a href='/category/mobile-accessories/'>
                  mobile-accessories
                </a>
            </li>
            <li className={Styles.SubListItem}>
              <a href='/category/cell-phone-pouch-cover/'>
                cell-phone-pouch-cover
              </a>
            </li>
            <li className={Styles.SubListItem}>
              <a href='/category/power-bank/'>
                power-bank
              </a>
            </li>
            <li className={Styles.SubListItem}>
              <a href='/category/cell-phone-holder/'>
                cell-phone-holder
              </a>
            </li>
          </ul>
        </div>
      )}

例如，我希望看到/main-category/digital/在页面源代码中被谷歌机器人爬行。任何帮助都将不胜感激。

Answer 1

NextJS中的链接应该包装在链接组件中

<Link href="/main-category/digital/">
  <a>

    <svg
      className={Styles.SubListHeadlineChevLeft}
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M15 19l-7-7 7-7"
      />
    </svg>
    هall cat

  </a>
</Link>