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 seem to be having an issue where my site doesn't appear to be redirecting correctly to social sites example below
https://www.shillerslist.com/https://t.me/shillerslist
Here's my code:
<Link
class='social-icon-link telegram'
to='/https://t.me/shillerslist'
target='https://t.me/shillerslist'
aria-label='Telegram'
>
<i class="fab fa-telegram-plane"></i>
</Link>
It keeps putting my website in front of the url and I'm not sure how I can stop it?
Try this:
<Link
className='social-icon-link telegram'
to='https://t.me/shillerslist'
target="_blank"
aria-label='Telegram'
rel="noopener noreferrer"
>
<i className="fab fa-telegram-plane"></i>
</Link>
You can also use this one as well:
<a href={"https://t.me/shillerslist"} target="_blank">
<i className="fab fa-telegram-plane"></i>
</a>
Also it seems your url: https://t.me/shillerslist is not working
I've solved it, it required // at the start of the link to.
<Link
class='social-icon-link telegram'
link to="//t.me/shillerslist"
target='_blank'
aria-label='Telegram'
>
<i class="fab fa-telegram-plane"></i>
</Link>
I am getting a warning on a React site I built
./src/components/layout/Navbar.js [1] Line 31: The href attribute requires a valid
address. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid
on the following code:
<p>
{isEmpty(profile.website) ? null : (
<a
className="text-white p-2"
href={profile.website}
target="#"
>
<i className="fas fa-globe fa-2x" />
</a>
)}
{isEmpty(profile.social && profile.social.twitter) ? null : (
<a
className="text-white p-2"
href={profile.social.twitter}
target="#"
>
<i className="fab fa-twitter fa-2x" />
</a>
)}
{isEmpty(profile.social && profile.social.facebook) ? null : (
<a
className="text-white p-2"
href={profile.social.facebook}
target="#"
>
<i className="fab fa-facebook fa-2x" />
</a>
)}
</p>
Even though the warning appears only for the first link, the same warning occurs on the next link if I remove the first link temporarily or change the href of the first link to a static URL.
The links need to appear as just an icon.
I have tried things such as using a button (did not have the correct look), using a function to open the dynamic url, and trying to force the href to be a string by using '' + {profile.website}. Many other suggestions have not worked.
Is there a way to prevent the error, without changing the jsx-a11y rules? Is what I have done not a good pattern, or is it just a bug in React or JSX?
Use href="/#" to replace href="#" OR href="javascript:;" OR href="javascript:void(0);"
It should remove the warnings.
These worked for me to get rid off the warning;
...
<a href={() => false}>...</a>
I've used href="!#" to remove warnings.
This is just a warning not a error that href attribute requires a valid value as # points to nowhere you can add links to href attributes to remove this warnings or if you are still in early development phase just write
/* eslint-disable jsx-a11y/anchor-is-valid */
On top of your code it will remove the warnings from the terminal, the above line disables the rule for the specified file where it is written
/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react';
const Header = () =>{
return(
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">Navbar</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
</nav>
)
}
To also prevent default I use this:
<a href="/#" onClick={(e) => e.preventDefault()}>Link Text</a>
Insert space after # so no more warning about it
replace href="#" to href="# "
but better if use like that href="#something" => href="#profile"
please use <button> instead of <a> when there's no href attribute.
official reference
If you really have to use the a tag, it maybe help you:
<a href="#" onClick={ev => {ev.preventDefault(); onClick();}}>"Hello A Tag"</a>
try replacing
target="#"
to
target="_blank"
I got the similar warning for href, I did as follows. May be try this. I got rid of the warning and functionality is intact. I am not sure this is correct. But tried this.
let hrefLink = '#'; passed as a arg like href={hrefLink}
If you are trying to render a page link dynamically then you can switch out an <a> tag for a <div> tag instead. The warning message will go away.
// DON't DO THiS
<a className="page-link" href="javascript:void(0);" onClick={() => onPageChange(page)}>
{page}
</a>;
// TRY THIS INSTEAD
<div className="page-link" onClick={() => onPageChange(page)}>
{page}
</div>;
If you put "javascript" word in the href attribute then you will get a RED WARNING:
index.js:1375 Warning: A future version of React will block
javascript: URLs as a security precaution. Use event handlers instead
if you can.
Reference: EsLint error resolution page
I've used the href in tag a. it's remove warnings.
<a href>Pictures</a>
You also can hide this warning adding a eslint-disable-next-line comment:
// eslint-disable-next-line
<a
onClick={e => {
// do something
}}
>
example
</a>
I've used the following to remove warnings.
<a href="/">
If we have written correct url but it also gives the same error like I put www.reactjs.org then it also gives the same warning. To resolve these problem we have an attribute in anchor tag i.e.
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
className used for style.
href used for links.
target used for open a link into new tab or not.
Rel is used to outcome from that warning in react.
I don't see something wrong if I'm refering to this.
https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md
Check in these links. Some people had the same problem than you and it comes from a Link component. They fix it in adding an exception to .eslintrc:
first link => https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/340
and the second link => How can I fix jsx-a11y/anchor-is-valid when using the Link component in React?
Let me know if it's helping.
Late to the game but surprised no one recommended window.location, which simply sets the same exact route as the current?
Other solutions such as "#", "/#", and "/" actually modify the current route right? For a more generic solution just use window.location to stay on the current page without modification.
<a href="window.location" onClick={...}> Better Solution </a>
If you really want your anchor tag to have an onClick method you must use a valid href link orelse it will throw an error , The href attribute requires a valid value to be accessible. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles.
Change you button style with this property to make transparent
button{
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
}
and set the text inside the button to the resemble link color
I have use this color
.editcolor{
color: #1890ff;
}
I resolved my errors with this method.
I tried but most of the answers above did not work for me since the newer eslint does not allow most of them. Instead, it mentions disabling eslint for the specific line.
Simply add: // eslint-disable-next-line to the line which comes just before the jsx line that throws error.
Also, add this comment within {/* ... */} else it will show error.
Usage: {/* // eslint-disable-next-line */ }}
They advise the same thing:
Hope this solves it!
You just need to change "#" to "# ". Good luck
<li className="nav-item pointer">
<a onClick={logout} href="/#" className="nav-link">
LOGOUT
</a>
</li>
or just use
href="/"
Do Not Use: <a href='#'>Something</a> but instead use: <a href='/'>Something</a>
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>