Fragment

Componentを作成する際に、以下のようにpタグとnavタグを同じ1番上の階層にて返却するようにすると、エラーになるかと思います。理由として、返却するhtmlは1つのタグに括られている必要があるためです。

Breadcrumb.tsx

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

以下のようにdivタグでくくるのも良いかと思いますが、余計なタグが増えてしまったり、cssをうまく当てることができないことが想定されます。

Breadcrumb.tsx

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

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

Breadcrumb.tsx◎

import { Fragment } from "react"; 

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

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

Breadcrumb.tsx◎

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