NextJs与动态路由——空参数场景如何处理？

Question

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

目录结构

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 没有 return 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 并实现其中的所有代码并配置 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与动态路由——空参数场景如何处理？

NextJs and dynamic routes - how to handle the empty parameter scenario?

reactjs

next.js

dynamic-routing