# Fragment Componentを作成する際に、以下のようにpタグとnavタグを同じ1番上の階層にて返却するようにすると、エラーになるかと思います。理由として、返却するhtmlは1つのタグに括られている必要があるためです。 {% code title="Breadcrumb.tsx" %} ```tsx export const Breadcrumb = () => { return (

パンくずリスト

); }; ``` {% endcode %} 以下のようにdivタグでくくるのも良いかと思いますが、余計なタグが増えてしまったり、cssをうまく当てることができないことが想定されます。 {% code title="Breadcrumb.tsx" %} ```tsx export const Breadcrumb = () => { return (

パンくずリスト

); }; ``` {% endcode %} そういった場合に、`Fragment`を使用することで、実際のHTML上はタグを生成せず、tsx上で、一つのタグに収めることができます。

import { Fragment } from "react"; 

export const Breadcrumb = () => {
  return (
    <Fragment>
      <p>パンくずリスト</p>
      <nav aria-label="breadcrumb">
       ...
      </nav>
    </Fragment>
  );
};

また`Fragment`のキーワードは省略することができ、`<>のように記述することができます。`

export const Breadcrumb = () => {
  return (
    <>
      <p>パンくずリスト</p>
      <nav aria-label="breadcrumb">
       ...
      </nav>
    </>
  );
};