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
/>
Related
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 open a table tab in a new window to interact with the component separately. What's the best recommended method to do this functionality in React.js?
try this pls . <a href="URL_LINK" target="_blank"/>.
such as :
<a href="http://localhost:3001/users" target="_blank"/>
<a href="http://localhost:3001/personels" target="_blank"/>
You can try target="_blank" for opening new tab if you are using <a href="SOME_URL" target="_blank"/>
or you can use onClick event as shown onClick={()=> window.open("someLink", "_blank")} if you just need to put on button .
I have some text which I'd like to be clickable.
And I want the picture to be opened when I click the certain word in a new window (not in a new tab).
How could I do that? The code below does not work.
<p>Click on the "Request Access" button and fill in the form.</p>
<a href="IMAGE_URL" target="_blank">
<img alt='img_path' class='img-40 rounded-circle' src='IMAGE_URL' />
</a>
Just add a target="_blank" to your link if you want to open the destination of a link in a new tab:
Request Access
And define a onClick method to open it in a window :
<a href="./images/TheForm.jpg"
onclick="window.open('./images/TheForm.jpg',
'windowName',
'width=800, height=600');
return false;"
>Request Access</a>
When you specify the width/height, it'll open the link in a new window instead of a tab.
Here is the documentation for further information.
This feels like the dumbest question I've asked on SO. I can't figure out how to make an img tag clicable in React...
<a className="App-link" href="https://www.google.com" target="_blank" rel="noopener noreferrer">
<img src="facebook_ad.jpg" className="App-ad" alt="facebook ad" />
</a>
Why the above code doesn't work? When I click on the img it just selects it.
Ignore the question... I had my links wrapped in several divs and for some reason this was preventing the links to open. I removed those divs and now the link works.
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>