Next.js向动态路由传递额外的数据

Question

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

我如何通过这两部电影。Episode_id和film。电影标题/[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>
)
}

Answer 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