Expo Router v3.4是否支持多层嵌套动态路由？

Expo Router v3.4完全支持/catalogue/[idCatalogue]/product/[idProduct]这类多层嵌套动态路由，具体实现步骤如下：

1. 按照路由结构创建文件目录 #

需严格对应路由层级创建文件结构，示例如下：

app/
  catalogue/
    [idCatalogue]/
      product/
        [idProduct].jsx  // 对应/catalogue/[idCatalogue]/product/[idProduct]的页面组件
        _layout.jsx      // 可选，用于product层级的统一布局
      _layout.jsx        // 可选，用于catalogue/[idCatalogue]层级的统一布局
  _layout.jsx            // 根布局文件

• 方括号包裹的文件夹/文件名即为动态路由参数，比如[idCatalogue]对应路由中的idCatalogue参数，[idProduct]对应idProduct参数。
• 可选的_layout.jsx用于定义对应层级的布局，比如导航栏、侧边栏等，不影响动态路由的核心功能。

2. 在页面组件中获取动态参数 #

使用Expo Router提供的useLocalSearchParams钩子，可直接获取所有层级的动态路由参数：

import { useLocalSearchParams } from 'expo-router';

export default function ProductDetailPage() {
  // 同时获取两层动态路由的参数
  const { idCatalogue, idProduct } = useLocalSearchParams();

  return (
    <div>
      <h2>目录ID：{idCatalogue}</h2>
      <h3>商品ID：{idProduct}</h3>
      {/* 其他商品详情内容 */}
    </div>
  );
}

3. 跳转至该多层动态路由 #

可通过Link组件或useRouter钩子实现跳转：

方式一：使用Link组件 #

import { Link } from 'expo-router';

// 假设已有catalogueId和productId变量
export default function CataloguePage() {
  const catalogueId = '123';
  const productId = '456';

  return (
    <Link href={`/catalogue/${catalogueId}/product/${productId}`}>
      查看商品详情
    </Link>
  );
}

方式二：使用useRouter钩子 #

import { useRouter } from 'expo-router';

export default function CataloguePage() {
  const router = useRouter();
  const catalogueId = '123';
  const productId = '456';

  const handleGoToProduct = () => {
    router.push(`/catalogue/${catalogueId}/product/${productId}`);
  };

  return (
    <button onClick={handleGoToProduct}>查看商品详情</button>
  );
}

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