Redirect doesn't rewrite URL

Question

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> 

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

Answer 1

NavLinks are react-router specific elements, that should only be used to link to other parts of your app. For external links you should use <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. If linking to an external page that is not a part of your React application, use an a tag link.
2. If linking to a different URL within your app, use the component. This will (depending on the routing library you're using) still ultimately render a semantically valid a tag, but doesn't refresh the page and gives you additional prop options that can be super handy (check your routing library's docs for details).

Answer 2

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>