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

问题描述

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

I've started messing around with Next JS, and I've come across my first hurdle.I am creating a page displaying a bunch of podcast episodes and I am displaying a little preview card for each podcast on the homepage. The card component looks something like this:

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)}.

Now I want to be able to pass the episode object to the full episode page located at /pages/episodes/[id].tsx that is being linked to via the Link element above, rather than have to refetch and filter all the episodes based upon the name of the route that I've chosen episodes/${episode.itunes.episode}-${kebabCase(episode.title)}.

• 是否可以将整个 episode 对象传递给新视图?
• 如果没有，是否可以将一些更具体的数据(例如唯一 ID)传递给视图，以便我能够更好地识别剧集，而不会因查询参数而使路线混乱?

推荐答案

添加到@AmerllicA 的答案，

Adding to @AmerllicA's answer,

我找到了一种在使用 getServerSideProps

Nextjs 链接组件文档https://nextjs.org/docs/api-reference/next/link

Nextjs Link Component documentationhttps://nextjs.org/docs/api-reference/next/link

Nextjs getServerSideProps 文档https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

Nextjs getServerSideProps documentationhttps://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

您可以将自定义对象传递给 href 属性的查询选项

You can pass a custom object to the query option of the href prop

<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数据确认数据通过

And can see the console.log data in the terminal to confirm the data is passed

终于可以在剧集画面中使用传递的道具了

Finally, you can use the passed props in the episode screen

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

我认为这也适用于 getStaticProps.

感谢您的提问.

这篇关于将自定义 prop 或数据传递给 Next JS Link 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！