javascript - React Link component spans the entire width of the div - Stack Overflow

admin管理员组

文章数量:1279185

I have a react Link ponent that contains a custom Button ponent that I made. The Link ponent'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 ponents?

I have a react Link ponent that contains a custom Button ponent that I made. The Link ponent'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 ponents?

• javascript
• reactjs
• react-router-dom

Share Improve this question Follow asked Jul 13, 2020 at 11:24 Zach HZach H 13011 silver badge1616 bronze badges 1

• Set the link to: display: inline-block - more info here stackoverflow./questions/34766562/… – StudioTime Commented Jul 13, 2020 at 11:34

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

As noted in other answers, react-router's Link ponent 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:

1. useNavigate

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

   import { useNavigate } from 'react-router-dom';
   
   const ButtonLink = () => {
     const navigate = useNavigate();
     return (
       <Button onClick={() => navigate('/')}>
         Text
       </Button>
     );
   };
   

2. display: contents

   Another method of constraining the Link ponent not mentioned in other answers is to style the Link ponent 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 pletely with an appropriate child, as in the example above, (2) that the child ponent exists in the accessibility tree, and (3) that it is reachable by screen reading, tabbing and other accessible navigation methods. More information here.

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>

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

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

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

本文标签： javascriptReact Link component spans the entire width of the divStack Overflow