NextJs和动态路由--如何处理空参数场景？

Question

我试图在不使用查询字符串的情况下检索url参数，例如，http://localhost:3000/test/1，这是我到目前为止所拥有的：

Dir结构

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：

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

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

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

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

通过以下方法获得查询参数：

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

您也只能创建pages/posts/[user]/[page]/index.js并实现该代码中的所有代码，并配置一个重定向。

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