4

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

4

1 回答 1

4

我知道我最好在收到 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,
      },
    ];
  },
};
于 2021-03-10T10:20:06.357 回答