React+antd 純正のパンくずリストはリンクがシンプルなhrefである。

シンプルなことを見落としていたのでメモ。

皆さんはReactを使う上でZustandのような状態管理を使っているかと思いますが、公式の使い方をするとリンクがhrefのシンプルなものになってしまい、状態管理がリセットされます。

import React from 'react';
import { Breadcrumb } from 'antd';

const App: React.FC = () => (
  <Breadcrumb
    items={[
      {
        title: 'Users',
      },
      {
        title: ':id',
        href: '',
      },
    ]}
    params={{ id: 1 }}
  />
);

export default App;

公式のコードをそのまま持ってきましたが、ここにあるitemsにセットしてあるリンク情報のhrefはそのままのリンクとして機能します。

これだと状態管理が機能しなくなってしまうので以下のようなカスタムコンポーネントに変更。

interface BreadItem {
  icon: ReactNode;
  name: string;
  href?: string;
}

interface MyBreadProps {
  items: BreadItem[];
}

export const MyBread: React.FC<MyBreadProps> = ({ items }) => {
  const breadcrumbItems: BreadcrumbItemType[] = items.map((item) => ({
    title: item.href ? (
      <Link to={item.href}>
        <span style={{ display: 'flex', alignItems: 'center' }}>
          {item.icon}
          <span style={{ marginLeft: 4 }}>{item.name}</span>
        </span>
      </Link>
    ) : (
      <>
        {item.icon}
        <span style={{ marginLeft: 4 }}>{item.name}</span>
      </>
    ),
  }));

  return <Breadcrumb items={breadcrumbItems} style={{marginBottom:"15px"}}/>;
};

export default MyBread;

使う側はこんな感じ。

          <MyBread
            items={[
              { icon: <TableOutlined />, name: 'パンくず１', href: '/sample' },
              { icon: <FormOutlined />, name: 'パンくず２' },
            ]}
          />

これで状態管理に対応したリンクを持ったパンくずになります！