Search code examples
reactjsnavreact-router-dom

Redirect doesn't rewrite URL

I have an ASP.net Core project with React in visual studio. On the nav bar I have a link for twitter.

<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

The link just adds on the URL to the current page and no delete or rewrite the existing the URL.

Solution

  • The purpose of using react-router-dom is to navigate to application routes by making changes in the DOM and not reloading the whole page. This scenario is applicable to internal links.

    When coming towards external links. It is something that is not the part of our application. We cannot render it in our application context. So, a solution to that is using an a tag for external links.

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