<Link> 在 NextJS 中无法按预期工作

Question

我正在创建一个 Next.js 应用程序，其中一部分要求我在单击卡片组件时创建动态路线。但是，在使用 Next.js 包装我的卡片后<Link>，我无法导航到该页面，因为单击时没有任何反应。我尝试<a>在我的下面添加一个标签Link，它成功了。我来自反应路由器，觉得只需添加<Link>应该有助于导航。<a>有人可以解释一下链接组件中需要一个标签吗？

下面是我的代码：

import React from 'react';
import OptionsDropdown from './components/OptionsDropdown';
import Card from './components/card';
import Link from 'next/link';

const Browse = () => {
  let filterByMenuEl = ['All items', 'Single items', 'Bundles'];
  let sortByMenuEl = ['Price: Low to High', 'Price: High to Low', 'Most Favorited'];
  let card1 = {
    name: 'Collectible 1',
    description: 'This is a description',
    price: '0.11',
    img: 'https://lh3.googleusercontent.com/Fviz0PWzUMQ98uvUZV8e_3y2R3D0nwk9q3jCQONoA2jh83vN2phkxEmLD3zpE1iiPOWNqh38rCqOC4agChgi704d0VGjgqwXrjiZ1Q=w600',
    list_date: 'here'
  }
  let card2 = {
    name: 'Collectible 2',
    description: 'This is a description',
    price: '0.12',
    img: 'https://lh3.googleusercontent.com/8pQQRseehVjJ5PRZkXANawtaCooQfdTF9Ld3UvJVXxVaiixxM9x357NqLwFqindvDlKZ-XqbLytwzL-LxpiDPgJLIqOq5OHjhg5PAQ=w600',
    list_date: 'here'
  }
  let card3 = {
    name: 'Collectible 3',
    description: 'This is a description',
    price: '0.13',
    img: 'https://lh3.googleusercontent.com/a2w4nmFDYU1Z5kimGQtymbw7E-Jj8zrZRGiKmkmv03e9z5VJAFFqSIsvq39EjtlETwluC9hDGx6EpS5YOCVN6X6pTlAiOpuD5tYW=w600',
    list_date: 'here'
  }
  let card4 = {
    name: 'Collectible 4',
    description: 'This is a description',
    price: '0.14',
    img: 'https://lh3.googleusercontent.com/P0FjJQ-9_YlBUtl6-pg5tgz1KUOqxgGRnB0u4v3C6YnY14cMWealXb5u3O2OI_Zr-YxMYaRs_b4TVrBTZzXF18_zhZ1WWPsBYj6xyg=w600',
    list_date: 'here'
  }
  let card5 = {
    name: 'Collectible 5',
    description: 'This is a description',
    price: '0.15',
    img: 'https://lh3.googleusercontent.com/alrw4OsjldeYC5WpJCfneeui2F4lNDU0xYLp80LA9horlf7wufhRG_2ln5u72PLaNh9tF_3WqSXZoCFTgIC9GatkKPobLQ5zYJgrug=w600',
    list_date: 'here'
  }
  let card6 = {
    name: 'Collectible 6',
    description: 'This is a description',
    price: '0.16',
    img: 'https://lh3.googleusercontent.com/lGp0y5VfF0j0gpe9OcY34inan58xkJuH6i6vCtCempSbUBMsF0cXexO_rFJNixIQP3n27M0L1waBS8oUI_JayefpzmB9Lw3q5oq6=w600',
    list_date: 'here'
  }

  let cards = [card1, card2, card3, card4, card5, card6];

  return(
    <div className='BrowsePage'>
      <div className='browse-options'>
        <div className='browse-results'>100,000 results</div>
        {/* <div className='options-spacer' /> */}
        <div className='browse-dropdowns'>
          <OptionsDropdown title='Filter by' menuEl={filterByMenuEl} />
          <OptionsDropdown title='Sort by' menuEl={sortByMenuEl} />
        </div>
      </div>
      <div className='browse-main'>
        {cards.map((e, index) => {
          return (
          <Link href={"/browse/" + e.name} key = {e.name} passHref={true}>
              <Card
              key={index}
              name={e.name}
              description={e.description}
              price={e.price}
              img={e.img}
            />
          </Link>
          )
        })}
      </div>
    </div> 
  );
} 

export default Browse;

Answer 1

如果您使用从 next 导入的链接，并且您想在其中放入 html 元素或 jsx 元素而不是文本。那么你必须用默认的锚标记包装 html 元素或 jsx 元素

<Link href={"/browse/" + e.name} key={e.name} passHref={true}>
    <a>
        <Card
            key={index}
            name={e.name}
            description={e.description}
            price={e.price}
            img={e.img}
        />
    </a>
</Link>

Answer 2

有人可以解释一下链接组件中需要一个标签吗？

<a>如果子项不是字符串，则需要在 Next.js 链接组件内添加标记。否则你不需要<a>标签。请参阅：NextJS Link 未呈现锚标记 来自： https: //github.com/vercel/next.js/blob/canary/packages/next/client/link.tsx

关于标签的一些想法<a>：

1. 每个内容中<a>应指示链接的目的地。如果 href 属性存在，则在聚焦于该<a>元素时按 Enter 键将激活它。请参阅：https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

2. <a>是一个标签，允许右键单击其中的其他元素，并具有“在新选项卡中打开链接”、“复制链接地址”等选项。（这就是我使用此组件的原因。）