<Link> 来自 react-router inside <Segment> from semantic-ui-react

Question

我使用 semantic-ui-react 库在我的 React 应用程序中定义了移动视图模式。模式由一堆 Segment 标签组成，这些标签使用来自 react-router 的 Link 标签路由到特定页面。该功能按我的预期运行良好，但我在 UI 中遇到问题。 Segment 标签占据屏幕的整个可用宽度，但是 Link 标签只占据 space 其中包含文本。现在，如果我单击 Segment，没有任何反应，但是当我单击 Segment 中的文本时，它会重定向到所需的页面。显然，这里的问题是 Link 标签转译为 anchor 标签，它只接受文本周围的 space 而Segment 标签转译为 div，占据整个屏幕宽度。

我尝试在 Segment 标签内的 Link 标签内使用 {{display:inline-block}}在 div 中使用 anchor 标签，但这对我不起作用。有什么建议吗？

这是我目前拥有的代码：

<Modal 
        trigger={<Button color="black" onClick={open}><Icon name="bars"/></Button>}
        open={modalOpen}
        onClose={close}
        basic
        size='small'>

        <Modal.Content>
          <Modal.Description>
            <Segment>
              <Link onClick={close} to='/login' style={{ color: '#000', display: 'inline-block' }}>{tt('navigation.login')}</Link>
            </Segment>
          </Modal.Description>
        </Modal.Content>

这是我得到的示例模态： example modal segment

Answer 1

如果要使整个片段成为 link，则需要使用 as 属性。

<Segment 
  as={Link} 
  style={{display:'block'}} 
  to='your/route/here' 
/>

<Link> 来自 react-router inside <Segment> from semantic-ui-react

<Link> from react-router inside <Segment> from semantic-ui-react

reactjs

semantic-ui-react