Next.js 13：如何判断URL中的Slug是否对应页面？

针对你遇到的问题——需要在动态面包屑里区分哪些路由分段对应可访问页面（比如[invoice]、editor、abcd），哪些只是参数容器（比如[tenant]），可以试试以下几种方案：

方案1：维护路由规则映射表（简单直接） #

如果项目路由结构相对固定，可提前维护一个路由规则集合，明确标记哪些路径是可跳转的页面：

// 定义所有可跳转的页面路径模板
const PAGE_ROUTE_TEMPLATES = new Set([
  '/dashboard/[tenant]/[invoice]',
  '/dashboard/[tenant]/[invoice]/editor',
  '/dashboard/[tenant]/[invoice]/editor/abcd'
]);

// 在面包屑组件中判断是否为可跳转页面
const isSegmentNavigable = (currentTemplatePath) => {
  return PAGE_ROUTE_TEMPLATES.has(currentTemplatePath);
};

使用时，把当前路径的实际参数替换回模板占位符（比如把tenant123替换成[tenant]），再和集合里的模板匹配，就能快速判断是否为页面。

方案2：服务器端遍历路由文件（动态适配） #

如果路由经常变动，可以在服务器组件中遍历app目录，自动收集所有包含page.tsx/page.js的路由路径，再传给客户端面包屑组件判断：

服务器组件（如Layout）中收集页面路径 #

import fs from 'fs';
import path from 'path';

// 遍历app目录，获取所有页面的路由模板路径
function getAllPageRouteTemplates() {
  const appDir = path.join(process.cwd(), 'app');
  const pageTemplates = new Set<string>();

  const traverseDir = (dir: string, currentRoute: string) => {
    const files = fs.readdirSync(dir);
    for (const file of files) {
      const fullPath = path.join(dir, file);
      const stat = fs.statSync(fullPath);
      
      if (stat.isDirectory()) {
        // 保留动态路由的占位符格式，比如[tenant]
        const routeSegment = file.startsWith('[') && file.endsWith(']') ? file : file;
        traverseDir(fullPath, `${currentRoute}/${routeSegment}`);
      } else if (['page.tsx', 'page.js'].includes(file)) {
        // 记录当前路由模板（去掉最后的/page.tsx）
        pageTemplates.add(currentRoute);
      }
    }
  };

  traverseDir(appDir, '');
  return pageTemplates;
}

export default async function DashboardLayout({ children }) {
  const pageTemplates = getAllPageRouteTemplates();
  return (
    <div>
      <Breadcrumb pageTemplates={pageTemplates} />
      {children}
    </div>
  );
}

客户端面包屑组件中判断 #

'use client';

import { usePathname, useParams } from 'next/navigation';

export default function Breadcrumb({ pageTemplates }) {
  const pathname = usePathname();
  const params = useParams();
  const segments = pathname.slice(1).split('/');
  const breadcrumbItems = [];
  let currentPath = '';

  for (const segment of segments) {
    currentPath += `/${segment}`;
    // 将实际路径转换为模板路径（替换参数值为占位符）
    let templatePath = currentPath;
    Object.entries(params).forEach(([key, value]) => {
      templatePath = templatePath.replace(value as string, `[${key}]`);
    });
    // 判断是否为可跳转页面
    const isNavigable = pageTemplates.has(templatePath);

    // 替换为自定义名称（这里复用你之前的API逻辑）
    let label = segment;
    if (segment === params.tenant) {
      label = await fetchTenantName(params.tenant); // 你的API调用
    } else if (segment === params.invoice) {
      label = await fetchInvoiceName(params.invoice); // 你的API调用
    }

    breadcrumbItems.push({ label, path: isNavigable ? currentPath : null });
  }

  // 渲染面包屑结构
  return (
    <nav aria-label="Breadcrumb">
      <ol className="flex gap-2">
        {breadcrumbItems.map((item, idx) => (
          <li key={idx}>
            {item.path ? (
              <a href={item.path} className="text-blue-600 hover:underline">
                {item.label}
              </a>
            ) : (
              <span className="text-gray-500">{item.label}</span>
            )}
            {idx < breadcrumbItems.length - 1 && <span> / </span>}
          </li>
        ))}
      </ol>
    </nav>
  );
}

方案3：利用页面元数据标记 #

在每个页面的page.tsx中导出自定义元数据，标记该路径是否可在面包屑中跳转：

// app/dashboard/[tenant]/[invoice]/page.tsx
export const metadata = {
  breadcrumb: {
    navigable: true
  }
};

// 因为[tenant]不是页面，对应的目录下没有page.tsx，所以无需标记

随后在服务器组件中，通过resolvePath获取对应路径的元数据，判断是否可跳转。这种方法适合需要精细化控制的场景，但实现相对复杂。

内容的提问来源于stack exchange，提问作者Re-Angelo