Next.js 动态路由参数 id 的获取与使用指南

理解 Next.js 动态路由参数

在 next.js 中，为了创建能够根据 url 路径中的变量部分加载不同内容的页面，我们使用动态路由。例如，app/cartitempage/[id]/page.jsx 这样的文件结构定义了一个动态路由，其中 [id] 是一个占位符，它将捕获 url 中该位置的任何值。这个被捕获的值，即 id，需要被传递到 page.jsx 组件中以便使用。

初学者常常会尝试直接将 id 作为组件的 props 接收，例如 const CartItemPage = ({ id }) => { ... }。然而，Next.js 的路由系统并非直接将动态段名称作为独立的 props 传递。相反，所有动态路由参数都被封装在一个名为 params 的对象中，作为组件的 props 传入。

正确获取动态路由参数

要正确地在 CartItemPage 组件中获取 id 参数，需要进行以下两项关键调整：

1. 文件结构确认： 确保你的动态路由文件结构是正确的。对于 id 参数，它应该位于一个名为 [id] 的文件夹内，例如：

   app/
   └── cartItemPage/
       └── [id]/
           └── page.jsx

   登录后复制

   这种结构确保 Next.js 能够识别 [id] 为一个动态路由段。

2. 组件参数接收： 在 page.jsx 组件中，你需要将 id 参数从 params 对象中解构出来。这意味着组件的 props 应该接收一个 params 对象，然后你可以通过 params.id 来访问具体的 id 值。

   以下是 CartItemPage.jsx 的正确实现示例：

   

   SpeakingPass-打造你的专属雅思口语语料

   使用chatGPT帮你快速备考雅思口语，提升分数

   25

   查看详情

   'use client'; // 声明为客户端组件
   
   import React, { useEffect, useState } from 'react';
   import { useRouter, useSearchParams } from 'next/navigation'; // 尽管在此场景下useRouter和useSearchParams并非获取动态路由参数的首选，但仍可保留
   import { useAppStore } from '@/app/Context/store'; // 假设这是你的全局状态管理
   
   const CartItemPage = ({ params }) => {
       // 从 params 对象中获取 id
       const { id } = params;
   
       const router = useRouter();
       const searchParams = useSearchParams();
       const { addToCart, cartItems } = useAppStore();
       const [cartItem, setCartItem] = useState(null);
   
       useEffect(() => {
           const fetchCartItem = async () => {
               try {
                   // 使用 params.id 进行数据请求
                   const response = await fetch(`https://fakestoreapi.com/products/${id}`);
                   if (!response.ok) {
                       throw new Error(`HTTP error! status: ${response.status}`);
                   }
                   const data = await response.json();
                   setCartItem(data);
               } catch (error) {
                   console.error('Failed to fetch cart item:', error);
                   setCartItem(null); // 请求失败时清空数据
               }
           };
   
           // 只有当 id 存在时才执行数据请求
           if (id) {
               fetchCartItem();
           }
       }, [id]); // 将 id 添加到依赖数组，确保 id 变化时重新请求
   
       if (!cartItem) {
           return <div>Loading or item not found...</div>;
       }
   
       return (
           <>
               <div>商品ID: {id}</div>
               <div>
                   <h2>{cartItem.title}</h2>
                   <img src={cartItem.image} alt={cartItem.title} style={{ maxWidth: '200px' }} />
                   <p>{cartItem.description}</p>
                   <p>价格: ${cartItem.price}</p>
                   {/* 其他商品详情 */}
               </div>
           </>
       );
   };
   
   export default CartItemPage;

   登录后复制

导航到动态路由页面

在 CartItem 组件或其他需要导航到 CartItemPage 的地方，你可以使用 Next.js 的 Link 组件来构建动态 URL。Link 组件会自动处理客户端路由，无需手动刷新页面。

// CartItem.jsx
'use client';
import Link from 'next/link';
// ...其他导入和组件逻辑

const CartItem = ({ data }) => {
    // ...组件状态和逻辑

    return (
        <>
            <div className={styles.productCard}>
                {/* 使用 Link 组件导航到动态路由 */}
                <Link href={`/cartItemPage/${data.id}`}>
                    <div className='flex items-center flex-col'>
                        <img className={styles.productImage} src={data.image} alt={data.title} />
                        <h3 className={styles.productTitle}>{data.title}</h3>
                        <p className={styles.productPrice}>{data.price} $</p>
                    </div>
                </Link>
                {/* ...购物车按钮 */}
            </div>
        </>
    );
};

export default CartItem;

通过 Link href={/cartItemPage/${data.id}}，当用户点击产品时，Next.js 会生成一个形如 /cartItemPage/123 的 URL，并正确地将 123 作为 id 参数传递给 CartItemPage 组件。

注意事项与总结

1. params 对象：始终记住，在 Next.js 的 App Router 中，动态路由段（如 [id]、[slug] 等）的值是通过组件的 params prop 传递的，而不是作为独立的 props。
2. useEffect 依赖：当在 useEffect 钩子中依赖动态路由参数进行数据请求时，请确保将 params 对象或其特定属性（如 params.id 或解构后的 id）添加到依赖数组中。这可以保证当路由参数发生变化时，useEffect 能够重新执行，从而加载正确的数据。
3. 客户端与服务器端：在 Next.js 13+ 的 App Router 中，page.jsx 组件默认是 React Server Components (RSC)。如果需要在组件内部使用 useState, useEffect 等 React Hooks，或者需要浏览器特有的 API（如 window），则需要像示例中那样添加 'use client'; 声明，将其标记为客户端组件。params prop 无论在服务器组件还是客户端组件中都可用。
4. useRouter 与 useSearchParams：useRouter 主要用于客户端导航和获取当前路由信息，useSearchParams 用于获取 URL 中的查询参数（例如 ?name=value）。它们与获取动态路由段（如 /path/[id] 中的 id）的方式不同，后者通过 params prop 获取。

遵循上述指南，你将能够有效地在 Next.js 应用中处理动态路由，并构建出响应式且功能强大的动态内容页面。

以上就是Next.js 动态路由参数 id 的获取与使用指南的详细内容，更多请关注php中文网其它相关文章！