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

Question

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

目录结构

test
 - [pageNumber].jsx

索引.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/[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并实现该代码中的所有代码并配置重定向

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