Reactjs <；链接>；从内部反应路由器<；细分市场>；从语义用户界面反应

我已经在我的react应用程序中使用语义ui react库为移动视图定义了一个模式。模式由一组段标记组成，这些标记使用react router的链接标记路由到特定页面。该功能如我所愿运行良好，但我在UI中面临一个问题Segment标记占据屏幕的整个可用宽度，但是链接标记只占据包含文本的空间。现在，如果我单击段，什么也不会发生，但是当我单击该段内的文本时，它会重定向到所需的页面。显然，这里的问题是，链接标记传输到锚定标记，它只占用文本周围的空间，而段标记传输到div，它占用整个屏幕的宽度

我试着在链接中使用{{display:inline block}}，在段中使用标记，就像人们在div中使用锚标记一样，但这对我不起作用。有什么建议吗

以下是我目前拥有的代码：

<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>

{tt（'navigation.login'）}

下面是我得到的示例模态：

---

如果要将整个片段作为链接，则需要使用

作为

道具

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

您期望的行为是什么？您已经描述了当前的行为，但是元素应该如何行为？很抱歉，如果我不清楚，我希望模态中的片段可以完全单击，而不仅仅是文本所在的位置。您需要与我共享您的标记，以查看您当前必须对其发表的评论。上面的示例基本上只是将段渲染为链接，而不是当前渲染为链接的内容。如果您使用JSX示例更新您的问题，我可以更好地回答这个问题。我将代码段与图像一起添加，以帮助您更好地理解我正在尝试执行的操作。因此，您是说您不希望该段本身成为链接，而将onClick事件作为关闭事件处理程序，相反，你想拥有“行”的全宽，你认为文本可以点击吗？默认情况下，锚定

标记具有

显示类型
内联
。如果将其更改为
inline block
，它只会添加一些块级属性，但仍不会占用父容器的全部宽度。如果将
display:block
作为您的样式添加到该链接中，则会使
标记占据父级的全部宽度。请注意，段填充仍不会链接或关闭您的模式。这可能会让用户感到困惑。您可能仍然希望将
单击
、
作为
、和
移动到
支柱，直到线段。不，我只希望线段标记的行为与链接标记类似，但保留其原始尺寸。我试着像你在最初的回答中提到的那样，把这个片段缩小到链接标签的尺寸。我希望segment标记提供的整个默认空间的行为类似于链接。