Пропустить перенаправление через localhost в маршрутизаторе React

#reactjs #typescript #react-router

#reactjs #typescript #react-маршрутизатор

Вопрос:

У меня есть список ссылок, но я вижу, что каждая ссылка перенаправляется через localhost :

Исходный код:

 <DetailsBox title={t('catalogPage.componentDetails.specs.links')}>
  <Typography variant="body1" component="p" gutterBottom>
    {component?.external_links?.map((link, index) => (
      <li style={{ listStyleType: 'none' }} key={index}>
        <a href={link.toString()}>{link.toString()}</a>
      </li>
    ))}
  </Typography>
</DetailsBox>

Кто-нибудь может посоветовать, как пропустить перенаправление? Я просто хочу перейти, например, к www.ww.pl

1. У меня была похожая проблема. Я добавил onClick событие, которое обрабатывает дальнейшую остановку распространения события. Код является onClick = {(e) => {e.preventDefault()}

2. как я уже говорил в своем комментарии, строка ссылки должна начинаться с префикса http или https вы можете создать href как ` //${link.toString()} ` (обернуть код в `)

3. Имея ваш код <a href={ //${link. toString()} }>{link.toString()}</a> перенаправляет ссылки на ‘https//www.ww2.pl ‘. Отсутствие двоеточия после https ;/

Ответ №1:

Ссылка должна начинаться либо с http:// or https:// , либо просто // (что будет принимать или сам http / s), в противном случае это переводится как маршрут, а не отдельная страница.

ссылка должна быть либо сохранена с помощью http:// or https:// , либо вы должны сделать это своим

 <DetailsBox title={t('catalogPage.componentDetails.specs.links')}>
  <Typography variant="body1" component="p" gutterBottom>
    {component?.external_links?.map((link, index) => (
      <li style={{ listStyleType: 'none' }} key={index}>
        <a href={`//${link.toString()}`}>{link.toString()}</a>
      </li>
    ))}
  </Typography>
</DetailsBox>

1. Хммм, я понимаю идею, но я не хочу привлекать конечного пользователя к пониманию этих деталей, как написать ссылку, конечный пользователь хочет просто написать ссылку без этих деталей. Спасибо за комментарий!

2. если ссылки принадлежат пользователю, то вы должны запустить для них функцию true sanitization, которая проверит, имеют ли они правильное начало, и если нет, вам придется редактировать строку в FE самостоятельно