向动态路由传递额外数据的Next.js
向动态路由传递额外数据的Next.js
提问于 2021-10-03 11:24:05
我想在我的路由地址中使用电影标题(例如电影/fletch)，但随后的getServerSideProps请求需要episode_id。
如何将film.episode_id和film.title都传递给index.js/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>
)
}回答 1
Stack Overflow用户
发布于 2021-10-03 11:30:30
您可以使用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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69424383
复制相关文章
相似问题
腾讯云开发者
