时间戳

首页 > 解决方案 > 如何使用嵌套的动态路由生成静态页面

javascript - 如何使用嵌套的动态路由生成静态页面

问题描述

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

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


 }

标签： javascriptnext.jsstatic-site-generation

解决方案

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

// 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>在浏览器中可用。

推荐阅读