{Ссылка} не приводит к правильному URL в реагировать

Question

Я изучаю Reactjs, и возникает проблема, когда я пытаюсь использовать {Link} для перехода на внешние веб-сайты.

<Link to={repo.html_url}>
{repo.name}
</Link>

Допустим, repo.html_url равен
https://github.com/ningmeng7998/SmartER-Project-Android-Frontend.
Вместо того, чтобы перевести меня на этот URL, я перехожу на http://localhost:3000/profile/https://github.com/ningmeng7998/SmartER-Project-Android-Frontend,, который добавляет localhost перед ним.

Как решить эту проблему?

Answer 1

Я предполагаю, что вы используете компонент React Router Link , так как он не является частью ванильного React.

В настоящее время React Router Link не поддерживают внешние URL-адреса, они просто предназначены для внутренней навигации в вашем приложении. Вы захотите использовать стандартный HTML-тег привязки. Попробуйте это:

<a href={repo.html_url}>{repo.name}</a>

В настоящее время обсуждается вопрос о Link поддержке внешних URL здесь , если вы хотите узнать больше или оставаться в курсе.

Другое решение - реализовать собственную оболочку вокруг Link, которая обрабатывает логику (и, в конце концов, выплевывает компонент <Link> для внутренних маршрутов или тег <a> для внешних URL-адресов).

Answer 2

Для внешних ссылок просто используйте тег a! <Link> используется только для внутренних маршрутов. Как видно из документов, сами React Router использовали a теги для внешней ссылки вместо Link.

<a href={repo.html_url}>
{repo.name}
</a>