Next.js 将附加数据传递给动态路由答案

【问题标题】：Next.js passing additional data to dynamic routesNext.js 将附加数据传递给动态路由
【发布时间】：2021-10-04 04:06:44
【问题描述】：

我想在我的路由 URL 中使用电影标题（例如电影/fletch），但随后的 getServerSideProps 请求需要 episode_id。

如何将film.episode_id 和film.title 都传递给films/[id]/index.js？

Movies.js

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

films/[id]/index.js

import {useRouter} from 'next/router'

const movie = () => {
    const router = useRouter();
    console.log(router);  
    const { id } = router.query

    return (
        <div>Movie page for <strong>{id}</strong></div>
    )
}

【问题讨论】：

Link 和 as 道具是否没有达到预期的行为？这应该将episode_id 正确传递到下一页，同时在地址栏中显示title。
@juliomalves 标题会根据需要出现在地址栏中。但我不知道如何访问 episode_id。
如果您尝试从getServerSideProps 访问它，那么您可以使用context.params.id。详情请见How to access route parameter inside getServerSideProps in Next.js?。

标签： reactjs next.js

【解决方案1】：

您可以使用context.query获取链接的查询参数。

// films/[id]/index.js

import PropTypes from 'prop-types'

const Movie = ({ query }) => {
  return (
    <div>Movie page for <strong>{query.id}</strong></div>
  )
}

Movie.propTypes = {
  query: PropTypes.shape({
    id: PropTypes.string,
  })
}

export async function getServerSideProps(context) {
  return {
    props: { query: context.query }
  }
}

export default Movie

【讨论】：