Next.js动态路由如何同时传递episode_id与影片title到目标页面

方案1：同时传递双参数（保留episode_id传递逻辑） #

原理：Next.js的Link组件中，as属性只控制浏览器地址栏显示的美化路径，href的query字段可以附加额外参数，不会显示在地址栏中。

1. 首先修改Movies.js中的Link配置，同时将路由文件films/[id]/index.js重命名为films/[title]/index.js匹配动态路由规则：

<Link 
  href={{
    pathname: `/films/[title]`,
    query: {
      title: film.title,
      episode_id: film.episode_id
    },
  }}
  as={`/films/${encodeURIComponent(film.title)}`} >
    <a>{film.title}</a>
</Link>

2. 修改films/[title]/index.js取值逻辑，客户端和getServerSideProps都可以直接拿到两个参数：

import {useRouter} from 'next/router'

const Movie = ({ detailData }) => {
    const router = useRouter();
    const { title, episode_id } = router.query

    return (
        <div>Movie page for <strong>{title}</strong>，剧集ID：{episode_id}</div>
    )
}

export async function getServerSideProps(context) {
  const { title, episode_id } = context.query
  // 直接用episode_id调用业务接口即可
  const res = await fetch(`你的业务接口地址/${episode_id}`)
  const detailData = await res.json()

  return {
    props: { detailData },
  }
}

export default Movie

注意：该方案在用户手动刷新页面时，额外的episode_id参数会丢失，如果需要兼容刷新场景，建议使用方案2

方案2：用标题作为查询标识（兼容刷新场景，更稳定） #

原理：如果影片标题是全局唯一的，可以直接在getServerSideProps中通过标题反查对应的episode_id，不需要额外传递参数，完全规避刷新丢失的问题。

1. Movies.js的Link配置：

<Link 
  href={{
    pathname: `/films/[title]`,
    query: {
      title: film.title
    },
  }}
  as={`/films/${encodeURIComponent(film.title)}`} >
    <a>{film.title}</a>
</Link>

2. films/[title]/index.js逻辑：

const Movie = ({ detailData }) => {
    return (
        <div>Movie page for <strong>{detailData.title}</strong>，剧集ID：{detailData.episode_id}</div>
    )
}

export async function getServerSideProps(context) {
  const { title } = context.query
  // 先通过标题查询对应的episode_id
  const idRes = await fetch(`你的映射查询接口?title=${encodeURIComponent(title)}`)
  const { episode_id } = await idRes.json()
  // 再用episode_id查询影片详情
  const detailRes = await fetch(`你的业务接口地址/${episode_id}`)
  const detailData = await detailRes.json()

  return {
    props: { detailData },
  }
}

export default Movie

补充提示：如果影片标题不唯一，又需要兼容刷新场景，可以把URL格式调整为films/标题-剧集ID（比如films/fletch-1），路由文件名改为films/[slug]/index.js，在getServerSideProps中拆分slug字符串即可同时拿到标题和episode_id，兼顾URL美观性和稳定性。

内容的提问来源于stack exchange，提问作者newcasio