reactjs - Why can't I get redirect to a weblink(in this case to ''twitter.com/explore'') I mentioned in this react code?

Question

The code:

import React from "react";
import "./App.css";
import "./Square.css";
import { thestack } from "./thestack";
import { Link, Router, NavLink } from "react-router-dom";
//import { Link } from 'react-router';

function Square(props) {
  return (
    <div className="Square">
      <p>
        <NavLink to={"https://twitter.com/explore"}>
          {props.username} <br />
        </NavLink>
        {props.sitcoms_one} <br />
        {props.sitcoms_two} <br />
        {props.sitcoms_three} <br />
        {props.sitcoms_four} <br />
        {props.sitcoms_five}
      </p>
    </div>
  );
}

export default Square;

It does show this in the URL of my project-> http://localhost:3000/https://twitter.com/explore But clicking on that element I can't go to the desired web link that I provided

question from:https://stackoverflow.com/questions/65856265/why-cant-i-get-redirect-to-a-weblinkin-this-case-to-twitter-com-explore-i

Answer 1

You can not use NavLink / Link to an external url, it is just used for application path.

You need to use a normal a tag:

<a href="https://twitter.com/explore">{props.username}</a>