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

【问题标题】：NextJs and dynamic routes - how to handle the empty parameter scenario?NextJs与动态路由——空参数场景如何处理？
【发布时间】：2020-10-04 00:38:40
【问题描述】：

我正在尝试在不使用查询字符串的情况下检索 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 页面和复制代码来处理空参数场景的情况下对其进行排序？

【问题讨论】：

从所有子页面导入和导出pages/test/index.jsx
@HMR 尽可能简单。谢谢！
@HMR 你能更具体一点吗？我不太明白您提到的选项，想知道它与Optional catch all routes 的比较
@MikeMajara 添加了答案。
@HMR 整洁！！干杯:)

标签： reactjs next.js dynamic-routing

【解决方案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/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,
      },
    ];
  },
};

【讨论】：