Typographyの覚書 | ワクガンス

Typography.Linkコンポーネントは、一般的なHTMLのアンカータグ（<a>）のカスタム版です。このコンポーネントはテキストのリンクを作成するために使われます。 Typography.Linkは、テキストの一部をリンクとして表示したいときに便利です。通常のアンカータグのようにhref属性を指定して使用することができ、他にもいくつかの有用なプロパティをサポートしています。 例えば：

import { Typography } from 'antd';

const { Link } = Typography;

ReactDOM.render(
  <Link href="https://www.example.com" target="_blank">
    This is an external link
  </Link>,
  mountNode,
);

上記のコードではTypographyのLinkコンポーネントを使用して外部リンクを作成しています。 target="_blank"属性を追加することで、リンクが新しいタブで開かれるようにしています。 ただし、シングルページアプリケーションでページ間のナビゲーションを管理する場合、React Routerの<Link>コンポーネントやNext.jsの<Link>コンポーネントを使うことが一般的です。これらのコンポーネントはブラウザのページ読み込みを回避し、クライアントサイドのナビゲーションを実現することでアプリケーションのパフォーマンスを向上させます。 Antdのスタイルやコンポーネントを使用しつつReact Routerなどのルーティング機能を組み合わせるには、以下のようにして<Link>コンポーネントをラップすることができます： jsx

import { Link } from 'react-router-dom';
import { Typography } from 'antd';

const { Text } = Typography;

<Text>
  <Link to="/your-path">Your Link Text</Link>
</Text>

この方法で、ルーティングライブラリのリンク機能とAnt Designのスタイリングを組み合わせることができます。