Wrapping a React-Router Link in an Html Button
Using Suggested Method: This Is the Result: a Link in the Button, Code in Between Comment Lines I Was Wondering If There Is a Way to Wrap a Link Element from...
Using suggested method: This is the result: A link in the button, Code in between comment lines
I was wondering if there is a way to wrap a Link element from 'react-router' in an HTML button tag using react.
I currently have Link components to navigate pages in my app, but I would like to map that functionality to my HTML buttons.
15 Answers
While this will render in a web browser, beware that:
⚠️Nesting an html button in an html a (or vice-versa) is not valid html ⚠️.
If you want to keep your html semantic to screen readers, use another approach.
Do wrapping in the reverse way and you get the original button with the Link attached. No CSS changes required.
<Link to="/dashboard">
<button type="button">
Click Me!
</button>
</Link>
Here button is HTML button. It is also applicable to the components imported from third party libraries like Semantic-UI-React.
import { Button } from 'semantic-ui-react'
...
<Link to="/dashboard">
<Button style={myStyle}>
<p>Click Me!</p>
</Button>
</Link>
LinkButton component - a solution for React Router v4
First, a note about many other answers to this question.
Must Read
⚠️ Nesting <button> and <a> is not valid html. ⚠️
Any answer here which suggests nesting a html button in a React Router Link component (or vice-versa) will render in a web browser, but it is not semantic, accessible, or valid html:
<a stuff-here><button>label text</button></a>
<button><a stuff-here>label text</a></button>
☝Click to validate this markup with validator.w3.org ☝
This can lead to layout/styling issues as buttons are not typically placed inside links.
Sophia analyzes international trade, startup ecosystems, retail transformation, and supply chain logistics for modern digital publications.
