文章摘要

1.动态路由

使用方式：

/app
  └── /user
      └── [abc]
      		└── page.tsx

以下是 [list]、[...list]、[[list]] 和 [[...list]] 这四种语法的区别：

1. [list]：
   • 是必需的单个参数。
   • 它表示 URL 中必须包含一个名为 list 的参数。例如，/items/1 会匹配 pages/items/[list].js，并且 list 的值为 1。
2. [...list]：
   • 是必需的多个参数（数组）。
   • 它会匹配 /items/a/b/c 这样的路径，并将 list 的值设置为 ['a', 'b', 'c']。
   • 如果只提供一个值，比如 /items/a，则 list 的值为 ['a']。
3. [[list]]：
   • 是可选的单个参数。
   • 它表示 URL 中可以包含一个名为 list 的参数，但也可以不包含。
   • 例如，/items 和 /items/1 都会匹配 pages/items/[[list]].js。
4. [[...list]]：
   • 是可选的多个参数（数组）。
   • 它表示可以匹配多个值，并且这个参数是可选的。
   • 它可以匹配 /items、/items/a、/items/a/b/c 等路径。
   • 在 /items 的情况下，list 的值为 undefined；
   • 在 /items/a 的情况下，list 的值为 ['a']；
   • 在 /items/a/b/c 的情况下，list 的值为 ['a', 'b', 'c']。

示例代码：

import { useRouter } from "next/router";
import { NextPage } from "next";

// 定义组件的 props 类型
// 注意：这里的 abc 要和动态路由的名称一样
interface UserPageProps {
  abc: string; // abc 是一个字符串类型
}

const UserPage: NextPage<UserPageProps> = ({ abc }) => {
  return (
    <div>
      <h1>User Page</h1>
      {/* 显示动态路由参数 */}
      <p>User ID: {abc}</p>
    </div>
  );
};

// 服务器端获取数据并传递给组件
export async function getServerSideProps(context: { params: { abc: string } }) {
  const { abc } = context.params;

  // 这里可以进行数据获取或其他逻辑处理
  // 例如，验证用户 ID 是否有效等

  return {
    props: {
      abc, // 将 abc 作为 props 传递给组件
    },
  };
}

export default UserPage;

2. 404 路由

文件名：not-found.tsx