Question

我正在尝试不使用查询字符串（例如http://localhost:3000/test/1）来检索url参数，这是我到目前为止的内容：

目录结构

test
 - [pageNumber].jsx

index.jsx

import React from 'react';
import { useRouter } from 'next/router';

const Index = () => {
  const router = useRouter();

  return (
    <>
      <h1>Page number: {router.query.pageNumber}</h1>
    </>
  );
};

export default Index;

它可以工作，但是如果我省略pageNumber参数，那么我得到的只是一个404页面，这是我们在使用查询字符串时所没有的问题。

现在，问题是：是否可以在不创建额外的index.jsx页面和复制代码以处理空参数的情况下对此进行排序？

Answer 1

我觉得我也可以在收到 MikeMajaras 评论通知后回答这个问题。

有几种方法可以做到这一点，假设您有一个从用户那里获取帖子并显示每页 10 个帖子的路由，因此有分页。

您可以通过创建 pages/posts/[[...slug]].js 来使用 optional catch all route 并通过以下方式获取路由参数：

const [user=DEFAULT_USER,page=DEFAULT_PAGE] = context?.query?.slug || [];

“缺点”是 pages/posts/user/1/nonexisting 不返回 404。

您可以创建实现所有代码的 pages/posts/index.js 和仅从 pages/posts/[user]/index.js 导出的 pages/posts/[user]/[page]/index.js 和 pages/posts/index.js

export { default, getServerSideProps } from '../index';

您可以通过以下方式获取查询参数：

const {user=DEFAULT_USER,page=DEFAULT_PAGE} = context.query;

您也可以只创建 pages/posts/[user]/[page]/index.js 并在其中实现所有代码并配置 redirect

module.exports = {
  async redirects() {
    return [
      {
        source: '/posts',
        destination: `/posts/DEFAULT_USER`,
        permanent: true,
      },
      {
        source: '/posts/:user',
        destination: `/posts/:user/DEFAULT_PAGE`,
        permanent: true,
      },
    ];
  },
};

NextJs和动态路由-如何处理空参数情况？

1 个答案: