面试题：Next.js动态路由中多个参数传递与接收及参数校验

Question

在Next.js项目里，若有一个动态路由页面`pages/product/[category]/[productId].js`，需要从列表页传递`category`和`productId`两个参数到该页面，并且要对接收的参数进行类型和格式校验（假设`productId`为数字类型），请详细阐述实现思路并给出主要代码。

Answer 1

实现思路

1. 列表页传递参数：在列表页中，使用Link组件并结合as和href属性传递category和productId参数。href用于指定实际的路由路径，as用于指定显示在浏览器地址栏中的路径。
2. 动态路由页面接收参数：在pages/product/[category]/[productId].js页面中，通过getStaticProps或getServerSideProps函数的上下文对象接收参数。
3. 参数校验：对接收的productId参数进行类型和格式校验，确保其为数字类型。

主要代码

列表页代码

import Link from 'next/link';

const ProductList = () => {
  const products = [
    { category: 'electronics', productId: 1 },
    { category: 'clothing', productId: 2 }
  ];

  return (
    <div>
      {products.map(product => (
        <Link
          href={`/product/${product.category}/${productId}`}
          as={`/product/${product.category}/${productId}`}
          key={product.productId}
        >
          <a>{product.category}: {product.productId}</a>
        </Link>
      ))}
    </div>
  );
};

export default ProductList;

动态路由页面代码

import { useEffect } from 'react';

const ProductPage = ({ category, productId }) => {
  useEffect(() => {
    const validProductId = typeof productId === 'number' && !isNaN(productId);
    if (!validProductId) {
      console.error('Invalid productId');
    }
  }, [productId]);

  return (
    <div>
      <p>Category: {category}</p>
      <p>Product ID: {productId}</p>
    </div>
  );
};

export const getStaticProps = async ({ params }) => {
  const { category, productId } = params;
  return {
    props: {
      category,
      productId: parseInt(productId, 10)
    },
    revalidate: 60 // 可选，用于增量静态再生
  };
};

export const getStaticPaths = async () => {
  // 假设从API获取所有产品数据
  const products = [
    { category: 'electronics', productId: 1 },
    { category: 'clothing', productId: 2 }
  ];

  const paths = products.map(product => ({
    params: { category: product.category, productId: product.productId.toString() }
  }));

  return { paths, fallback: false };
};

export default ProductPage;

在上述代码中：

• 列表页通过Link组件传递参数。
• 动态路由页面在getStaticProps函数中接收参数，并转换productId为数字类型。
• 在组件内部通过useEffect对productId进行类型和格式校验。