【React Router カスタマイズ】Link コンポーネントのアンダーラインを消してオリジナルデザインを実現
2024-04-02
React Router の Link コンポーネントは、デフォルトでアンダーラインが設定されています。これは、リンクであることを視覚的に示すためですが、デザインによってはアンダーラインが不要な場合もあります。
アンダーラインを消す方法はいくつかあります。
方法 1: textDecoration プロパティを使用する
最も簡単な方法は、textDecoration プロパティを none に設定することです。
<Link to="/home" style={{ textDecoration: "none" }}>Home</Link>
方法 2: className プロパティを使用する
className プロパティを使用して、独自のスタイルを適用することもできます。
<Link to="/home" className="my-link">Home</Link>
.my-link {
text-decoration: none;
}
as プロパティを使用して、別の HTML 要素をレンダリングすることもできます。
<Link to="/home" as="button">Home</Link>
方法 4: NavLink コンポーネントを使用する
NavLink コンポーネントは、Link コンポーネントの拡張版です。activeClassName プロパティを使用して、アクティブなリンクのスタイルを設定できます。
<NavLink to="/home" activeClassName="active">Home</NavLink>
.active {
text-decoration: none;
}
- 簡単な方法でアンダーラインを消したい場合は、
textDecorationプロパティを使用するのがおすすめです。 - デザインにこだわりたい場合は、
classNameプロパティまたはasプロパティを使用するのがおすすめです。 - アクティブなリンクのスタイルも設定したい場合は、
NavLinkコンポーネントを使用するのがおすすめです。
- アンダーラインを消す以外にも、
Linkコンポーネントのスタイルをカスタマイズすることができます。詳細は、React Router ドキュメントを参照してください。
import React from "react";
import { Link, NavLink } from "react-router-dom";
const App = () => {
return (
<div>
<h1>アンダーラインを消す方法</h1>
<h2>方法 1: `textDecoration` プロパティを使用する</h2>
<Link to="/home" style={{ textDecoration: "none" }}>Home</Link>
<h2>方法 2: `className` プロパティを使用する</h2>
<Link to="/home" className="my-link">Home</Link>
<h2>方法 3: `as` プロパティを使用する</h2>
<Link to="/home" as="button">Home</Link>
<h2>方法 4: `NavLink` コンポーネントを使用する</h2>
<NavLink to="/home" activeClassName="active">Home</NavLink>
</div>
);
};
export default App;
.my-link {
text-decoration: none;
}
.active {
text-decoration: none;
}
このコードを実行すると、4つのリンクが表示されます。
- 1つ目のリンクは、デフォルトでアンダーラインが表示されます。
- 2つ目のリンクは、
textDecorationプロパティを使用してアンダーラインが消されています。
- 上記のコードは、React Router v6 を使用しています。React Router v5 を使用している場合は、コードを少し変更する必要があります。
- 上記のコードは、基本的な例です。必要に応じて、コードをカスタマイズすることができます。
他の方法
!important を使用する
textDecoration プロパティに !important を追加することで、ブラウザのデフォルトスタイルを上書きすることができます。
<Link to="/home" style={{ textDecoration: "none !important" }}>Home</Link>
ただし、!important はできるだけ使用しないことを推奨しています。
CSS プリプロセッサーを使用している場合は、変数や mixin を使用してコードをより簡潔に書くことができます。
$link-color: #000;
.link {
color: $link-color;
text-decoration: none;
}
.active {
color: $link-color;
text-decoration: underline;
}
<Link to="/home" className="link">Home</Link>
ライブラリを使用する
styled-components などのライブラリを使用すると、コードをより簡単に書くことができます。
import styled from "styled-components";
const Link = styled.a`
color: #000;
text-decoration: none;
&.active {
text-decoration: underline;
}
`;
const App = () => {
return (
<div>
<Link to="/home">Home</Link>
</div>
);
};
export default App;
React Router の Link コンポーネントのアンダーラインを消す方法はいくつかあります。どの方法を使用するかは、状況によって異なります。
javascript reactjs react-router
