Редирект не переписывает URL - PullRequest
Новая
       7

Редирект не переписывает URL

0 голосов
/ 23 января 2020

У меня есть ASP. net Базовый проект с React в visual studio. На панели навигации у меня есть ссылка для твиттера. 

<ul className="navbar-nav flex-grow">
   <NavItem>
      <NavLink tag={Link} className="TwitterLogo" to="https://twitter.com/"><img src={SMtwitter} 
       className="SMicon" alt="TwitterLogo" color="white" /></NavLink>
   </NavItem>

enter image description here

Ссылка просто добавляет URL на текущую страницу и не удаляет или перепишите существующий URL.

Ответы [ 2 ]

2 голосов
/ 23 января 2020

NavLinks являются определенными c элементами реагирующего маршрутизатора, которые должны использоваться только для связи с другими частями вашего приложения. Для внешних ссылок вы должны использовать <a href=""></a>. 

// a normal-looking, HTML-style a tag:
<a href="https://www.example.com">Click Here!</a>

// some kind of Link component, provided by React/Reach Router, Gatsby, etc
<Link to="/example">Click Here!</Link>
  1. Если вы ссылаетесь на внешнюю страницу, которая не является частью вашего приложения React, используйте ссылку тега.
  2. Если в вашем приложении есть ссылка на другой URL, используйте компонент. Это (в зависимости от используемой вами библиотеки маршрутизации) все равно в конечном итоге отдает семантически допустимый тег, но не обновляет sh страницу и дает вам дополнительные параметры поддержки, которые могут быть очень удобными (проверьте документацию вашей библиотеки маршрутизации для детали).
1 голос
/ 23 января 2020

Цель использования react-router-dom состоит в том, чтобы переходить к маршрутам приложения, внося изменения в DOM и не перезагружая всю страницу. Этот сценарий применим к внутренним ссылкам.

При переходе на внешние ссылки. Это то, что не является частью нашего приложения. Мы не можем отобразить это в контексте нашего приложения. Таким образом, решение этой проблемы заключается в использовании тега a для внешних ссылок. 

<ul className="navbar-nav flex-grow">
   <NavItem>
      <a className="TwitterLogo" href="https://twitter.com/">
        <img src={SMtwitter} className="SMicon" alt="TwitterLogo" color="white" />
      </a>
   </NavItem> 
</ul>
...