a タグと同じデザインになる button タグ（div タグ）を作成する常套手段はありますか？

Question

前提・実現したいこと

React でアプリケーション開発をしています。
私自身はデザインの知識が乏しく、状況としては先に用意されているデザインに React のコンポーネントとして利用しています。
また、元のデザイン自体は JSX としてではなく HTML として作成されています。

発生している問題・エラーメッセージ

以下のように、画面遷移がもともと a タグを用いて実装されていました。

<a href="#">ホーム</a>

こちらを React の JSX として利用するために、以下のように変更しました。

<a onClick={menu.toHome}>{PAGE_TITLE.HOME}</a>

すると、eslint に以下のような忠告を受けます。

The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md

また、a タグではない div タグや button タグを利用すると、デザインが崩れてしまいます。

こういった場合、その時のデザインに合わせて CSS を書き換える必要があるのでしょうか？
a タグと同じデザインになる button タグを作成する常套手段等があるのであれば知りたいです。

試したこと

a タグそのものにデザインが書かれているのかと思い、確認しましたが、transition しか設定されていませんでした。

Answer 1

href に "#"（そのまま # のみ）を指定した上で、onClick の中で e.preventDefault() を呼べば href は無効化されます。
参考: 合成イベント (SyntheticEvent) – React

<a href="#" onClick={e => { menu.toHome(); e.preventDefault(); }}>{PAGE_TITLE.HOME}</a>

これはあまり良くない書き方だからやめようという話もあり、button タグをリンクっぽく表示する CSS なんてものもあるようですが。
参考: Re:href="#" onclick の悪習 - to-R
参考: eslint の jsx-a11y/anchor-is-valid プラグイン