Next.js 13路由优化：如何实现可读URL同时获取categoryId参数？

步骤1：修改动态路由文件名 #

把原来的app/[categoryId]/page.jsx重命名为app/[categorySlug]/page.jsx，这样路由参数就变成分类的可读别名（slug），URL会显示为www.mypage.com/food这类友好形式。

步骤2：在页面组件中通过slug获取categoryId #

在新的page.jsx里，通过params拿到categorySlug，再根据slug查询对应的分类ID。以下是基于本地数据的示例，你可以替换为实际的API或数据库查询逻辑：

// app/[categorySlug]/page.jsx
async function getCategoryBySlug(slug) {
  // 替换为你的数据获取方式：调用后端接口、读取JSON文件等
  const categories = [
    { id: '46asdfg56as8g', slug: 'food', name: '美食' },
    { id: '78zxcv90bnm12', slug: 'travel', name: '旅行' }
  ];
  return categories.find(category => category.slug === slug);
}

export default async function CategoryPage({ params }) {
  const { categorySlug } = params;
  const category = await getCategoryBySlug(categorySlug);

  if (!category) {
    return <div>分类不存在</div>;
  }

  // 用category.id查询该分类下的具体内容
  // const categoryContent = await fetch(`/api/categories/${category.id}`).then(res => res.json());

  return (
    <div>
      <h1>{category.name}</h1>
      {/* 渲染分类内容 */}
    </div>
  );
}

步骤3：生成导航链接时使用slug #

在导航组件里，跳转路由时传入分类的slug而非id：

// 导航组件示例
import Link from 'next/link';

export default function Navbar() {
  const categories = [
    { id: '46asdfg56as8g', slug: 'food', name: '美食' },
    { id: '78zxcv90bnm12', slug: 'travel', name: '旅行' }
  ];

  return (
    <nav>
      {categories.map(category => (
        <Link key={category.id} href={`/${category.slug}`}>
          {category.name}
        </Link>
      ))}
    </nav>
  );
}

额外注意事项 #

• slug唯一性：确保每个分类的slug唯一，避免路由冲突。如果有同名分类，可以在slug后追加ID后缀（如food-123）。
• slug规范化：生成slug时统一格式，比如转小写、把空格替换为连字符（美食转成mei-shi），避免URL出现特殊字符。
• 404处理：若用户输入不存在的slug，可使用Next.js的not-found组件返回标准404页面，提升用户体验。

内容的提问来源于stack exchange，提问作者AndiGo