时间戳

首页 > 解决方案 > Next.js 将附加数据传递给动态路由

reactjs - Next.js 将附加数据传递给动态路由

问题描述

我想在我的路由 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>
    )
}

标签： reactjsnext.js

解决方案

您可以使用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

推荐阅读