React Link component spans the entire width of the div

Question

I have a react Link component that contains a custom Button component that I made. The Link component's width automatically set to fit it's parent div making areas clickable that shouldn't be. I messed with the code and had the idea to put the Link into a Span resulting in this code.

<span><Link to="/"><Button buttonStyle="primary">Create Account</Button></Link></span>

This worked perfectly but I only sort of understand why. Can someone explain this in full? Why did this fix the clickable area for the Link and button components?

Set the link to: `display: inline-block` - more info here https://stackoverflow.com/questions/34766562/how-to-create-a-div-box-with-dynamic-width-based-on-text-content/34766629#34766629 — StudioTime, Jul 13 '20 at 11:34

Arnab · Accepted Answer · 2020-07-13T11:49:09.743

Link renders a <a> tag which by default doesnt contain the content inside of it. SO when you are placing a button, I believe the button is styled as display: block. So the button is displayed as blocked element relative to the parent of the <a> tag. Set the style of the link to display: inline-block. In that case, the tag will contain the button and also will be in inline block element relative to its parent.

<Link to="/" style={{display: 'inline-block'}}>
    <Button buttonStyle="primary">Create Account</Button>
  </Link>

braxex · Answer 2 · 2022-05-21T02:01:19.407

As noted in other answers, react-router's Link component wraps all child elements, and the default styling causes it to fill the full width available to it from the parent, essentially width: 100%.

A couple solutions:

useNavigate

react-router has a hook called useNavigate that you could use instead of the Link component.

import { useNavigate } from 'react-router-dom';

const ButtonLink = () => {
  const navigate = useNavigate();
  return (
    <Button onClick={() => navigate('/')}>
      Text
    </Button>
  );
};

display: contents

Another method of constraining the Link component not mentioned in other answers is to style the Link component with display: contents.
```
<Link to='/' style={{display: 'contents'}}>
  <Button>Text</Button>
</Link>
```
Using display: contents removes the display box for the parent, replacing it with its children's boxes.

Note: Current browser behavior removes this element from the accessibility tree. If you use this property value you should do so with caution, and ensure that (1) you are replacing it completely with an appropriate child, as in the example above, (2) that the child component exists in the accessibility tree, and (3) that it is reachable by screen reading, tabbing and other accessible navigation methods. More information here.

score 2 · Answer 3 · answered Jul 13 '20 at 11:47

Link component from react router wraps everything that you pass as children,in your example Button component, with <a></a> element. That element is by default display:block meaning it will take full width of the parent that holds Link component.

So you need to either constrain parent component to desired width or pass class or style to Link component and style it in that way:

<span>
  <Link to="/" style={{width: '100px'}}>
    <Button buttonStyle="primary">Create Account</Button>
  </Link>
</span>

React Link component spans the entire width of the div

3 Answers3