面试题：Next.js动态路由在电商商品列表页的应用方式

1. 路由定义

在 Next.js 中，可以通过在 pages 目录下创建带有方括号的文件夹或文件来定义动态路由。例如，为了根据商品分类和筛选条件展示商品，我们可以创建如下结构：

pages/
└── products/
    └── [category]/
        └── [filter].js

这里 [category] 和 [filter] 是动态参数。

2. 参数传递

使用 Link 组件：在 Next.js 中，通常使用 next/link 组件来进行页面跳转并传递参数。假设我们有一个商品分类列表，点击每个分类跳转到相应的商品列表页：

import Link from 'next/link';

const CategoryList = () => {
    const categories = ['electronics', 'clothing', 'books'];
    return (
        <ul>
            {categories.map(category => (
                <li key={category}>
                    <Link href={`/products/${category}`}>
                        <a>{category}</a>
                    </Link>
                </li>
            ))}
        </ul>
    );
};

export default CategoryList;

如果还需要传递筛选条件，可以进一步扩展 href，例如 href={/products/${category}/price:low-to-high}。

3. 参数接收

在动态路由对应的页面组件（例如 pages/products/[category]/[filter].js）中，可以通过 useRouter 钩子来接收参数：

import { useRouter } from 'next/router';

const ProductList = () => {
    const router = useRouter();
    const { category, filter } = router.query;
    return (
        <div>
            <h1>Products in {category} with filter: {filter}</h1>
        </div>
    );
};

export default ProductList;

4. 根据参数获取对应数据并展示

数据获取：可以使用 getStaticProps 或 getServerSideProps 来获取数据。假设我们有一个 API 用于根据分类和筛选条件获取商品数据，以 getServerSideProps 为例：

import { useRouter } from 'next/router';

export async function getServerSideProps(context) {
    const { category, filter } = context.query;
    const response = await fetch(`https://api.example.com/products?category=${category}&filter=${filter}`);
    const products = await response.json();
    return {
        props: {
            products
        }
    };
}

const ProductList = ({ products }) => {
    return (
        <div>
            <h1>Product List</h1>
            <ul>
                {products.map(product => (
                    <li key={product.id}>{product.name}</li>
                ))}
            </ul>
        </div>
    );
};

export default ProductList;

这样，通过动态路由的参数传递和接收，结合数据获取方法，就可以在电商网站的商品列表页根据不同分类和筛选条件展示对应的商品。

星途面试题库

面试题：Next.js动态路由在电商商品列表页的应用方式

知识考点

面试题答案

1. 路由定义

2. 参数传递

3. 参数接收

4. 根据参数获取对应数据并展示