i have used react router doms' Link:
<Link target="_blank" to={"www.mylink.com"} >mylink </Link>
but this would open new tab to http://localhost:3000/www.mylink.com
also, using a href:
<a href={'www.mylink.com'} target="_blank" > mylink </a>
does the same. opens new tab to http://localhost:3000/www.mylink.com
how do i open in new tab only the link?
try this
<Link target="_blank" to={"//www.mylink.com"} >mylink </Link>
or this
<a href={'//www.mylink.com'} target="_blank" > mylink </a>
for more reference:
Absolute vs relative URLs
https://en.wikipedia.org/wiki/Uniform_Resource_Identifier#Generic_syntax
I tried to use Link but I had the same problem. Now I'm using this
onClick={() => { window.open('LINK','_blank')}}
When I used Link like
<Link to={`//${isHrefVlaue}`}></Link>
this was opening without localhost, but it was missing the colon in https and not working as expected.
But then it worked after I replaced Link with an anchor like
<a href={isHrefVlaue}></a>
Related
Below I put a screenshot of some ReactJS code which are buttons that are linked to another part of my website.
I was wondering why this code was not working correctly when I click on it.
<Actions>
<PrimaryButton href="/about" css="">
Start Searching
</PrimaryButton>
<SecondaryButton href="/about">
Learn More
</SecondaryButton>
</Actions>
I tried the above solution and when I clicked the button, it did nothing.
You can use a tag to open an another page. You can use target _blank to open in a new tab or you can use _self to open the same tab.
<a className="your classname" target="_blank" rel="noopener noreferrer" href="/about"
Start Searching
/>
When user click, it does not open nothing and once reload the browser the
anchor open the url social media and all is fine until user navigate to other
page and come back again to Contact page the problem is repeated
export const Contact = () => {
return (
<div className="socialMedia">
<p className="mb-3">VisÃtenos en nuestras Redes Sociales</p>
<ul >
<li>
<a href="https://www.instagram.com/fridartestudio"
target="_blank"
rel="noreferrer"
><i className="bi bi-instagram" id="inst" ></i></a>
</li>
<li>
<a href="https://www.facebook.com/fridarteestudio"
target="_blank"
rel="noreferrer"
><i className="bi bi-facebook" id="faceb" ></i></a>
</li >
</ul>
</div>
)
}
I would like to know how to solve this simple problem with my anchors links social media. thanks by the way
I tried out your code it's actually working fine for me. It's opening the social links and even after I navigate to other page and come back to Contact it still worked fine. How about you re-open your project with npm start
You can also read this out -
https://www.digitalocean.com/community/tutorials/creating-a-social-follow-component-in-react
I want to link downloadable content on my documentation and I tried putting in a link like this:
<a
href={
require("#site/static/img/04-api/01/API-Description.png")
.default
} download="file-name"
> download </a>
This generates following html:
<a download="file-name" href="/assets/images/API-Description-6aeb65d8ae136a70b1b5a3d916d27ca0.png"> download </a>
<a download="file-name" href="/assets/images/API-Description-6aeb65d8ae136a70b1b5a3d916d27ca0.png"> download </a>
When I click on the link, I get
"Page Not Found"
I am running version: 2.0.0-beta.17
I found two of doing this.
First, put the file inside the static folder.
Example: ./static/image.png.
1) Your way
<a href={ require("/image.png").default }>download</a>
2) Simple way
[download](/image.png)
** Note that we did not use the ! to indicate that is an image.
You had to use inline-html with the download attribute and target="_blank"
[not working](/logo.png)
<a href={ require("/logo.png").default } download={"origName"}>not working</a>
<a target="_blank" href={ require("/logo.png").default } download>working</a>
I'm trying to create navigation between some categories while changing the link on click
I need to get this localhost/blog/category/:category1 it works for the first category selected but when I click again I get this localhost/blog/category/blog/category/:category2.
I'm using LINK for redirection
<Link
className="nav-link"
aria-current="page"
to={`blog/category/${item}`}
>
thank you
try this :
<Link
className="nav-link"
aria-current="page"
to={`/blog/category/${item}`}
>
I have a page inside pages so, if you go to direct URL then it will print console.log once and if you go there with then it is printing twice.
Why it is happening?
I want to perform some task once per page.
<Link route={href} href={href}>
<a href={href}>
page to redirect
</a>
</Link>
I already go through with this issue https://github.com/zeit/next.js/issues/253 but still I am not clear
I am using next-routes package for <Link>
<Link to={href} href={href}>
<a>
page to redirect
</a>
</Link>
remove href on <a /> and replace route to to on <Link/>