<Link> от реакции-маршрутизатора внутри <Сегмент> от semantic-ui-реагировать

Question

Я определил модал для мобильного представления в моем приложении реакции, используя библиотеку semantic-ui-Reaction. Модал состоит из набора тегов Segment, которые направляются на конкретную страницу с помощью тега Link от реакции-маршрутизатора. Функциональность работает нормально, как я и предполагал, но я столкнулся с проблемой в пользовательском интерфейсе. Тег сегмента занимает всю доступную ширину экрана, но тег ссылки занимает только пространство, содержащее текст. Теперь, если я щелкаю по Сегменту, ничего не происходит, но когда я щелкаю по тексту внутри этого Сегмента, он перенаправляется на нужную страницу. Очевидно, проблема здесь в том, что тег Link переносится в тег привязки, который занимает только пространство, окружающее текст, а тег Segment переносится в div, который занимает всю ширину экрана.

Я попытался использовать {{display: inline-block}} внутри тега Link внутри тега Segment, как это делают люди с тегом привязки в 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>

и вот пример модального я получаю: пример модального сегмента

Answer 1

Если вы хотите сделать весь сегмент ссылкой, вам нужно использовать as двигательный

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