我在我的博客主页上使用这个来进行分页.这些页面类似于url/?Page=2等.

export default async function HomePage({
    searchParams,
}: {
    searchParams: {[key: string]: string | string[] | undefined};
}) {
    const DataPosts = await getPostsNumber();
    const PostsNumber = DataPosts.postCount;

    const page = getNumericParam(searchParams.pagina, 1);
    const limit = getNumericParam(searchParams.numar, 10);

就像一种护身符.现在我正试着为分类页面做同样的事情.在这里,我已经有了参数来获取类别名称.我如何才能添加要分页的那些?

export async function generateMetadata({params}: {params: {category: string}}) {
    const slug = params.category;

我试过这个:

export default async function Page({
    params,
}: {
    params: {category: string; [key: string]: string | string[] | undefined};
}) {
    const slug = params.category;

    const DataPosts = await getPostsNumber(slug);
    const PostsNumber = DataPosts.categories[0].count;

    const page = getNumericParam(params.pagina, 1);
    const limit = getNumericParam(params.numar, 10);

但是PARAMS总是返回"{ategory:‘name’}",没有页面.

推荐答案

由于您使用的是Next.js app路由,因此可以使用以下命令检索url查询参数:

export default async function Page({
    params,
    searchParams,
}: {
    params: { category: string };
    searchParams?: { [key: string]: string | string[] | undefined }
}) {
    const slug = params.category;

    const DataPosts = await getPostsNumber(slug);
    const PostsNumber = DataPosts.categories[0].count;

    const page = getNumericParam(searchParams?.pagina, 1);
    const limit = getNumericParam(searchParams?.numar, 10);

Reactjs相关问答推荐

Shadck/ui Select -当用户 Select 项目时更改状态

条件索引路由

我应该如何管理设置组件初始状态的复杂逻辑?

for each 子级加载父路由加载器

如何使用Reaction Testing Library+Vitest正确更新单元测试中的输入?

如何使ionic 面包屑在州政府条件下可点击?

安装使用环境的BIT组件的依赖项

为什么在页面重新加载时Location.State变得未定义?

错误:操作必须是普通对象.使用自定义中间件进行异步操作. Redux/工具包

无法在下一个标头上使用 React hooks

在 React 中是否有任何理由要记住 Redux 操作创建者?

当从子状态更改复制时,react 父状态更改.我该如何防止这种情况?

带有 webpack 错误多个文件匹配路由名称的 Expo-router.无法Bundle 或部署应用程序

如何在 ChartJS 中操作 Y 轴

NextJS htaccess 设置

页面加载时不显示数组中的数据

在 Remix 中使用 chartjs 和 react-chartjs-2 会出现错误react-chartjs-2未在您的 node_modules 中找到

React Router v6 - 访问嵌套路由和处理手写 url 的正确方法

在 React 中使用使用状态挂钩合并两个数组

RTK 查询 POST 方法不会改变数据