Question

使用next @ latest及其动态路由功能。我有

/pages/index.tsx和/pages/department/[slug]/index.tsx。第一个index.tsx使用getStaticProps提取一点数据。在开发期间，此数据是对象的自动生成的数组。然后，我通过索引组件中的props.departments渲染这些对象。

我正在显示部门列表，并希望将项目链接到单个页面：

{departments.map(dept => (
  <Link
    as={`/department/${dept.slug}`}
    href="/department/[slug]"
  >
    ...
  </Link>
)}

由于没有明显的父子关系，因此似乎无法传递道具。

我是否必须在[slug] /index.tsx中查询一个部门，我应该使用react useContext，还是有一个更好的设计方法来解决这个问题？

感谢您的指导。

Answer 1

如果您选择使用上下文API在两条路由/pages/index.tsx和/pages/department/[slug]/index.tsx之间共享状态，则必须将App组件与上下文提供者包装在_app.tsx中。这将导致另一个问题，如果您还有另外三个不需要数据的路由，它们也将成为上下文提供者的子级，而无需使用上下文中的值。

我建议如果使用静态生成，而getStaticPaths使用单个部门的服务器端呈现，请使用数据获取方法（即getStaticProps和getServerSideProps来查询数据。

/pages/department[slug]/index.tsx的某些伪代码可能是这样

如果使用静态生成

export const getStaticPaths: GetStaticPaths = async () => {
  let paths: {params: { slug: string;}}[] = [];

  // generate the paths for the pages you want to render
  return {
    paths,
    fallback: false // false if you know all the slugs that you want to generate ahead of time  
  }

}

interface IProps {
  // props for your page
}

export const getStaticProps: GetStaticProps<IProps> = async (context) => {
   // get the slug
   const slug = context.params?.slug;

   // query the data based on slug

   return {
     props: {
       // return the queried data as props
     }
   }
}

如果使用服务器端渲染

interface IProps {
  // data you need as props
}

export const getServerSideProps: GetServerSideProps<IProps> = async (context) => {
  // get the slug
  const slug = context.params.slug

  // query the data

  return {
    props: {
       // return the queried data
    } 

  }

}

在构建时，将从getStaticProps返回的每个路径调用一次

P-S- getStaticPaths。 getServerSideProps将根据请求被调用，因此请根据需要选择要如何获取数据。

Nextjs动态路线-如何将道具从父级传递到动态路线子级

1 个答案:

如果使用静态生成

如果使用服务器端渲染