ReactでLinkコンポーネントを使用するとjsx-a11y/anchor-is-validをどのように修正できますか？次eslintエラー</p> <p><code>The href attribute is required on an anchor. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid</code></p> <p>有効href属性でリンク・コンポーネントの結果で反応するアプリで

Question

は

<Link to={`/person/${person.id}`}>Person Link</Link>

結果。

<a href="#/person/2">Person Link</a>

このエラーのポイントは何ですか？これをどうやって解決するのですか？

ご協力いただければ幸いです！

Answer 1

Linkコンポーネントはhref属性を生成します。したがって、最後のアンカータグはアクセシビリティの観点から有効です。 an exception.eslintrcに追加：

"jsx-a11y/anchor-is-valid": [ "error", { "components": [ "Link" ], "specialLink": [ "to" ] } ] 

はさらに、GitHubの答えと同じ問題があります。

Answer 2

おそらく、テンプレートリテラルを作成するためにシングルクォートの代わりにバッククォートを挿入することを意図していました。以下を試してください：

<Link to={`/person/${this.state.id}/edit`}>Edit</Link>