Dynamic Segment

React

従来の入れ子構造

src/app > products > [productId] > reviews > [reviewId] > page.tsx
src/app > products > [productId] > reviews > page.tsx
src/app > products > [productId] > page.tsx
src/app > products > page.tsx

この動的ルーティングをより簡便にしたのが動的セグメント

page.tsxやディレクトリをたくさん作る必要がなくなる

src/app > products > [[…slug]] > page.tsx

import React from 'react';

const page = ( {params}: { params: {slug: string[]} } ) => {
  if( params.slug?.length === 2 ) {
    return (
      <h1>
        {params.slug[0]}年{params.slug[1]}月に発売された商品です。
      </h1>
    );
  } else if( params.slug?.length === 1 ) {
    return (
      <h1>{params.slug[0]}年の商品です</h1>
    );
  } else {
    return (
      <h1>すべての商品です</h1>
    )
  }
};

こうすることで、例えばhttp://localhost:3000/products/2024/01 に行くと

2024年01月に発売された商品です　という文字が表示できるようになる

BACK