Nesting anchor tags (which is what <Link />
transpiles to) is forbidden in HTML. Even if you get the desired result, it is only because your browser is clever and has its own work-arounds. However, that behavior cannot be guaranteed across all browsers and platforms.
How seriously should I take this?
As per the above, I'd say quite seriously.
What would be the workaround?
The following isn't a workaround, but what I consider to be the "proper" implementation.
I'd programatically implement the navigation for the wrapping element and use the <Link />
for the buttons. So something like:
navigate = () => {
//push "path1" to history
}
render() {
return(
<div onClick={this.navigate}>
<Link to="path2">Some button</Link>
<Link to="path3">Some button</Link>
</div>
);
}
For more info about programatically navigating in React Router see one of the links below:
- For React Router v1-v3: Link
- For React Router v4: Link
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…