如何生成带有嵌套动态路由的静态页面

问题描述

我一直在这个网站上工作，但遇到了障碍。基本上我应该按类型列出电影，从数据库中获取。流派应该带我到另一个基于流派的列表。一旦用户单击“动作”类型的电影，就会将他们带到另一个页面上的电影详细信息。 这是结构

Movies/ [moviesbygenrelist]/list

一切正常。

转到第二个动态页面我无法获取第一个和第二个动态页面的值 如下...

Movies/ [moviesbygenrelist]/[movie-slug]

我正在静态生成网站

如何在第二个动态页面上获取第一页的参数

这就是我所拥有的， 我先打电话

 let movieTypeID;
 let movieSlug;
    export async function getStaticProps({params}) {

        movieTypeID=params.movietype;
        movieSlug=params.movie;


     }

我的逻辑是我可以从 getStaticProps 但不能在 getStaticPaths 中访问路由参数，所以我先调用它，实例化变量，然后将它们传递给 getStaticPaths，这样我就可以使用变量进行数据库调用，因为我现在在数据库中有点深.没有动态参数我无法拨打电话 我像下面这样传递它们

export async function getStaticPaths(movieTypeID,movieSlug) {

///only they come out as undefined


 }

解决方法

假设页面位于 Next.js 应用程序中的 pages/movies/[type]/[slug].jsx 下：

// pages/movies/[type]/[slug].jsx
export async function getStaticPaths() {
  const movies = db.getAllMovies() // Retrieve all movies data from database
  const paths = movies.map((movie) => ({
    params: { type: movie.type,slug: movie.slug },}))

  return {
    paths,fallback: false // Paths not returned will result in a 404
  };
}

export async function getStaticProps({ params }) {
  const { type,slug } = params
  const movieData = getMovie(type,slug) // Retrieve data for given type/slug pair

  return {
    props: {
      data: movieData
    }
  }
}

function Movie({ data }) {
  //render the given movie data
}

export default Movie

这将为您数据库中的所有电影静态生成页面。每个页面都将在浏览器中的 /movies/<movie-type>/<movie-slug> 处可用。