Reactjs 如何命名Next js中嵌套动态路由的页面模板

我正在尝试实现一个动态路由结构，在我的下一个JS应用程序中使用Prismic。基本上，我有一个页面，

mysite.com/landing page

，例如，我可以在

[uid]

模板中使用

{uid}=params

在我的

getServerSideProps

函数中路由到该页面。但是，我希望允许用户通过子目录访问同一页面，例如

mysite.com/sacramento ca/landing page

。我所做的研究似乎表明，我可以在Prismic存储库中创建一个内容关系，指定页面也可以引用的位置（

sacramento ca

，这里是示例），然后引用查询中的内容，并将其传递给页面模板。然而，我不知道如何才能做到这一点

我的

页面

目录的结构如下：

├── [uid]
│   └── index.tsx
├── index.tsx
├── products
│   └── [uid].tsx
├── projects
│   └── index.tsx
├── promos
│   ├── [id].tsx
│   └── index.tsx
└── sitemap
    └── index.tsx

..总的来说，这对于顶级页面来说非常有效。但是1。如何在

getServerSideProps

中查询

类别

，如何命名和嵌套页面模板？我也读过这篇文章，这似乎是在正确的轨道上，但我不知道如何做到这一点。下面是我的

[uid]

模板的代码，以防有帮助

import React from 'react';

import { SEO } from 'components/seo/SEO';
import { SliceZone } from 'components/slice-zone/SliceZone';

import { client, queryWithProducts } from '../../lib/prismic';

export const Page = ({ document }: any) => {
  const slices = document;
  if (!slices) return null;

  const { meta_title, meta_description, meta_keywords, social_image } = document;

  return (
    <>
      <SEO
        title={meta_title}
        description={meta_description}
        keywords={meta_keywords}
        banner={social_image.url}
      />
      <SliceZone slices={slices} />
    </>
  );
};

export default Page;

export const getServerSideProps = async ({ params, query }: any) => {
  console.log(query)
  const { uid } = params;
  const { data: document } = await client.getByUID('landing', uid, queryWithProducts);

  return {
    props: {
      document,
    },
  };
};

从“React”导入React；
从'components/SEO/SEO'导入{SEO}；
从'components/slice zone/SliceZone'导入{SliceZone}；
从“../../lib/prismic”导入{client，queryWithProducts}；
导出常量页=（{document}:any）=>{
常量切片=文档；
如果（！slices）返回null；
const{meta_title，meta_description，meta_关键字，social_image}=文档；
返回(
);
};
导出默认页面；
export const getServerSideProps=async（{params，query}:any）=>{
console.log（查询）
常量{uid}=params；
const{data:document}=wait client.getByUID（'landing'，uid，queryWithProducts）；
返回{
道具：{
文件，
},
};
};

如果您走的是正确的道路，您可以使用

您需要将文件夹重命名为

[…uid]

，这将使

params.uid

返回数组而不是字符串

/[…uid]/index.tsx
export const getServerSideProps=async（{params，query}:any）=>{
常量{uid}=params；
//导航到/sacramento ca/登录页时，“uid”将
//是一个数组，包含['sacramento-ca'，'登录页']
//添加基于数组值检索数据的逻辑
返回{
道具：{
文件，
},
};
};

好的，我已经掌握了这项工作的基本知识。唯一让我头疼的是，我不知道如何解析数组值以从

Prismic

获取数据。基本上，

sacramento ca/内部门

可以工作，但是当我只访问

内部门

时，我得到一个错误，说我的

Prismic

客户端需要一个字符串文本。由于位置，

sacramento ca

，是可选的，您应该调整代码以支持它-您可以检查

uid

数组长度，并根据它从Prismic查询不同的数据。我现在写的类似于：

const parsed=\uu.isArray（uid）？uid[1]：uid[0]

然后我将解析的

传递给我的Prismic客户端。这就是你的意思吗？实际上，
uid
将始终是一个数组。您需要根据第二个元素包含的项目数检查是传递第二个元素还是传递第一个元素。