10
11 return (
12 <Link href={`products/${product.name}`}>
13 <a>14 <div className="hover:bg-gray-200 rounded-box flex items-center p-2 active:bg-gray-300">
15 {product.images && (
16 <img src={product.images[0]} className="h-16 w-16 object-contain" />167 query: { name: product.name },
168 }}
169 >
170 <a>171 <div
172 className="p-4 px-6 hover:bg-gray-200 hover:cursor-pointer mx-auto rounded-2xl my-2 w-[15vw]"
173 style={{146 query: { name: product.name, channel: e },
147 }}
148 >
149 <a>150 <div
151 className="p-4 px-6 hover:bg-gray-200 hover:cursor-pointer mx-auto rounded-2xl my-2 w-[15vw] "
152 style={{124 query: { name: product.name },
125 }}
126 >
127 <a>128 <div
129 className="p-4 px-6 hover:bg-gray-200 hover:cursor-pointer mx-auto rounded-2xl my-2 w-[15vw] "
130 style={{ 85 } p-2 m-0 cursor-pointer rounded-xl active:text-white`}
86 onClick={followHandler}
87 >
88 <a>{follow ? "unfollow" : "follow"}</a> 89 </li>
90 </ul>
91 </div>JavaScript frameworks and libraries like React have made it very easy to add or remove functionality from standard HTML elements. This has led to anchors often being used in applications based on their appearance and function instead of what they represent. While it is possible, for example, to turn the <a> element into a fully functional <button> element with ARIA, the native user agent implementations of HTML elements are to be preferred over custom ARIA solutions.
It is recommended to use a valid anchor to avoid confusion while reading a code.
Here are a few scenarios where this issue will be raised:
You need a clickable element
In this scenario, use the onClick property. onClick is the standard handler used to detect whether an element has been pressed.
<a onClick={onClickHandler} />
<a href="#" onClick={onClickHandler} />
<button onClick={onClickHandler}>Authenticate</button>
You need to navigate to a different page via a hyperlink
If you need to visit a different page, use the a tag's href attribute to control the URL you will navigate to.
<a href="/dashboard">Dashboard</a>
<a href="/jobs">Career</a>
A UI interaction such as a button press must take place
Buttons are usually represented by the dedicated <button> tag, but can also make use of the <a> tag, without the href attribute. Removing this attribute will ensure that the page does not navigate elsewhere when the anchor element is clicked on. It is generally recommended to prefer using <button> and not <a> when defining buttons.
<a onMouseEnter={expand}>Table of Content</a>
<button onClick={playHandler}>Play</button>
Bad Practice
// Anchors should be a button
<a onClick={foo} />
<a href="#" onClick={foo} />
<a href={"#"} onClick={foo} />
<a href={`#`} onClick={foo} />
<a href="javascript:void(0)" onClick={foo} />
<a href={"javascript:void(0)"} onClick={foo} />
<a href={`javascript:void(0)`} onClick={foo} />
// Missing href attribute
<a />
<a href={undefined} />
<a href={null} />
// Invalid href attribute
<a href="#" />
<a href={"#"} />
<a href={`#`} />
<a href="javascript:void(0)" />
<a href={"javascript:void(0)"} />
<a href={`javascript:void(0)`} />
Recommended
<a href="https://github.com" />
<a href="#section" />
<a href="foo" />
<a href="/foo/bar" />
<a href={someValidPath} />
<a href="https://github.com" onClick={foo} />
<a href="#section" onClick={foo} />
<a href="foo" onClick={foo} />
<a href="/foo/bar" onClick={foo} />
<a href={someValidPath} onClick={foo} />