javascript - 将自定义 prop 或数据传递给 Next JS Link 组件

Question

我已经开始使用 Next JS，并且遇到了我的第一个障碍。
我正在创建一个显示一堆播客剧集的页面，并且在主页上为每个播客显示一个小预览卡。卡片组件看起来像这样:

import React from 'react';
import Link from 'next/link';
import { kebabCase } from 'lodash';
import { format } from 'date-fns';
import TextTruncate from 'react-text-truncate';

import { Episode as EpisodeInterface } from '../../interfaces';

type Props = {
  episode: EpisodeInterface;
};

const Episode: React.FunctionComponent<Props> = ({ episode }) => {
  return (
    <Link
      href="episodes/[id]"
      as={`episodes/${episode.itunes.episode}-${kebabCase(episode.title)}`}
    >
      <div className="group transition duration-500 cursor-pointer rounded-lg overflow-hidden shadow-lg border border-cream-darker bg-surface hover:bg-surface-hover hover:border-surface-hover hover:text-text-hover">
        <div className="px-6 py-6">
          <div className="font-bold font-serif text-3xl mb-2">
            {episode.title}
          </div>

          <div className="transition duration-500 flex justify-between mb-2 text-gray-700 group-hover:text-text-hover">
            <span>Episode {episode.itunes.episode}</span>
            <span>{format(new Date(episode.isoDate), 'd MMMM yyyy')}</span>
          </div>

          <div className="mb-2">
            <TextTruncate line={3} text={episode.contentSnippet} />
          </div>
        </div>
      </div>
    </Link>
  );
};

export default Episode;

现在我希望能够通过 episode反对位于 /pages/episodes/[id].tsx 的完整剧集页面通过 Link 链接到上面的元素，而不是必须根据我选择的路线名称重新获取和过滤所有情节 episodes/${episode.itunes.episode}-${kebabCase(episode.title)} .

是否可以通过整个episode反对新观点？

如果没有，是否可以将一些更具体的数据(例如唯一 ID)传递给 View ，这将使我能够更好地识别剧集，而不会用查询参数弄乱路线？

Answer 1

添加到@AmerllicA的答案，
我找到了一种在单击 <Link> 时将 Prop 传递到目标页面的方法使用 getServerSideProps 的组件
Nextjs 链接组件文档
https://nextjs.org/docs/api-reference/next/link
Nextjs getServerSideProps 文档
https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering
您可以将自定义对象传递给 href 的查询选项。支柱

<Link
    href={{
        pathname: "episodes/[id]",
        query: {
            id: episode.itunes.episode,
            title: episode.title
        }
    }}
    as={`episodes/${episode.itunes.episode}-${kebabCase(episode.title)}`}
 >
... button stuff
</Link>

在 pages/episodes/[id].js

export async function getServerSideProps = (context) => {
    console.log(context.query) 
    // returns { id: episode.itunes.episode, title: episode.title}
    

    //you can make DB queries using the data in context.query
    return {
        props: { 
           title: context.query.title //pass it to the page props
        }
    }
}

并且可以看到 console.log终端中的数据以确认数据通过
终于可以在剧集画面中使用传递的 Prop 了

const Episode = (props) => {
    return (
        <div>{props.title}</div>
    )
}

我认为这适用于 getStaticProps也是。
感谢你的提问。