I am working on a portfolio and I'm using react.js. I simply want to click an image, for example, a StackOverflow icon, and be able to redirect to the page. I'm seeing all sorts of different ways to go about, yet I cannot get it to redirect.
I am using React-Bootstrap which I don't know if that is going to change anything.
export default class Home extends Component {
render() {
return (
<Grid>
<Jumbotron className="brainImg">
</Jumbotron>
<div class="footer"><center className="iconsBaby">
<Image src="giticon.png" className="githubIcon" to="https://github.com/Joeyryanbridges" />
<Image src="linkedinIcon.png" className="linkedinIcon" href="https://github.com/Joeyryanbridges" />
<Image src="SOFIcon.png" className="githubIcon" href="https://github.com/Joeyryanbridges" />
</center>
</div>
</Grid>
)
}
Thank you for looking.
Generally an Image component should not be a link on its own. What you should do is wrap your image component with an <a> tag or use the Link component if you're using react-router.
<a href="https://github.com/Joeyryanbridges">
<Image src="giticon.png" className="githubIcon" />
</a>
OR with react-router Link
<Link to="https://github.com/Joeyryanbridges">
<Image src="giticon.png" className="githubIcon" />
</Link>
This way the Image component is not concerned with redirects or changing URLs and that functionality is handled by the proper component or tag.
Always keep in mind that separation of concerns is very important when it comes to reusability and maintainability.
Just wrap tag inside an like this:
<a href="abc.com">
<Image src="abc.png" />
</a>
Or If you are using react-router,then you can do this:
import { Link } from "react-router-dom";
<Link to="www.abc.com">
<Image src="abc.png" />
</Link>
Hope this help:
1.You can first declare in the state
load:false
2.use the onClick event and call a function like -
<Image src="giticon.png" className="githubIcon" onClick={()=> handleClick()} />
Inside the function set load to true.
Now check the value of the load to direct to whatever you need.
I hope it works.
There is another method to it , which is just create a onclick attribute to your react element
<img src="<img-link>" alt="<alt-text>" onClick={link} />
and then outside the return statement of your react function you can use 2 methods to link the image which is
location.replace and location.href
both of which would have syntax as follow
window.location.href = "<link>";
and
window.location.replace("<link>");
the methode to use this both is as follow
const link= () => { //remember the onclick attribute mentioned in img tag is having name **link**
window.location.href = "<the-link-to-which-you-want-to-redirect";
}
in this way you can achive your desired output!!
line 6 contain the function and line 18 contain styled react image element... refer if you want
Note:-
window.locatio.replace("")
will replace the webpage , so some one clicking on the image would not be able to use back button of browser .
So use them according to your need!!
The easiest way I've found is to just make sure you add target="_blank" rel="noopener noreferrer" to your tag. Like this:
<a href={ resume } target="_blank" rel="noopener noreferrer">
<img className="resume" src={ resumeLogo } alt="Link to resume" />
</a>
To use an image as a link in React, wrap the image in an tag or a Link tag if using react-router. The image will get rendered instead of the link and clicking on the image will cause the browser to navigate to the specified page.
import {Link} from 'react-router-dom';
The function code can be as follows:
<div>
<Link to="/your-pagename-or-url">
<img src="https://hamedvahedi.com/sample.jpg" alt="" />
</Link>
</div>
Related
I am a bit of a beginner to react and tsx. I want to be able to ctrl click it into a new tab, but in it's current state it doesn't allow that. This seems really easy if you have a constant link to give it, but I've tried everything that I could find and couldn't get it to work with a nameless function.
<Button variant="link" onClick={evt => labelClick(entity.id)}>
{ entity.rawDevice.name }
</Button>
Thanks!
You can Link component from react-router-dom.
import {Link} from 'react-router-dom';
<Link to='/home' target="_blank" rel="noopener noreferrer">Go to Page</Link>
This question already has answers here:
Warning: Function components cannot be given refs
(7 answers)
Closed 6 months ago.
I'm new to use Next.js framework to make my latest project.
I use Image tag from next/image in Link tag from next/link,
But I got the error like below.
next-dev.js?3515:24 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `ForwardRef(LinkComponent)`.
My code was like below.
export defult function header (){
return {
<div>
<Link href="/">
<Image
src="http://xxxx.xxxx.xxx.com"
objectFit="contain"
layout="fill"
/>
</Link>
</div>
}
}
I read the official documents and use 'passHref' tag at Link,
and change code like below.
export defult function header (){
return {
<div>
<Link href="/" passHref>
<Image
src="http://xxxx.xxxx.xxx.com"
objectFit="contain"
layout="fill"
/>
</Link>
</div>
}
}
But still error ocurrred.
Does anyone advice how to stop this kind of error, please?
The passHref is if you have a custom component that wraps an a. For an image you don't need this but you do need an a tag, i.e.:
export default function Header() {
return {
<div>
<Link href="/">
<a>
<Image
src="http://xxxx.xxxx.xxx.com"
objectFit="contain"
layout="fill"
/>
</a>
</Link>
</div>
}
}
I'm using React router dom Link component. It is basically twitter's home feed. I want to be able to have two type of Links in one div component. One will be Link to go to user's profile and other one to go to post. I am currently getting warning and couldn't find solution for now. Here is the screenshot as reference:
I understand the issue here, my post Link is the parent element and I've added two user Link components inside of it as the user should be able to access post page when he clicks on anything inside of the post except user's profile photo and user's name. Is there any smarter way of achieving this and keeping links like this?
Code:
{posts?.map((post) => (
<Link
className={classes.link}
key={post.user.id}
to={`/posts/${post.id}`}
>
<div className={classes.post}>
<Link to={`/users/${post.user.id}`}>
<img
className={classes.profileImage}
src={DefaultLogo}
alt="default-profile"
/>
</Link>
<article className={classes.postDetails}>
<Link
className={classes.link}
to={`/users/${post.user.id}`}
>
<Typography
variant="subtitle1"
className={`${classes.postTitle} ${classes.content}`}
>
{post.user.name}
</Typography>
</Link>
<Typography
variant="subtitle1"
className={`${classes.postText} ${classes.content}`}
>
{post.body}
</Typography>
</article>
</div>
</Link>
))}
Yes, having anchor tags inside of another anchor tag is misleading a bad approach to doing things. But given your requirements you can make use of a basic button with react router dom history api.
A simple example:
import {Link, useHistory} from 'react-router-dom'
const App = () => {
const history = useHistory()
return (
<a
href='/user/1'
>
<h2>John doe</h2>
<div>here are some use information</div>
{/* Need to prevent the event bubbling */}
<Link role='link' to='/users/1/posts'>
User posts
</Link>
</div>
)
}
I am having this scenario where in I fetch a particular URL from backend and then on click of a button , I have to open that link in a new tab and also load a component in the current tab using react-router
import { Button } from 'semantic-ui-react';
import { Link } from 'react-router-dom';
import * as React from 'react';
this.state={ url: ''} ; // This url I am able to get using fetch
//I get URL from the backend, and then I am trying to set it to href attribute. Routing just works find but link does not get opened in the new tab.
<Link to="/path">
<a href={this.state.url} target="_blank">
<Button size="small" fluid >
Continue
</Button>
</a>
</Link>
try this:
onBtnClick = (e) => {
window.open(this.state.url, '_blank');
this.props.history.push('/link/to/route/in/current/tab');
}
...
<Button size="small" fluid onClick={this.onBtnClick}>
Continue
</Button>
Disclaimer. This is for those who came across this answer on Google and did not like the suggested implementation.
A better solution (in my opinion) is this
<Button as={Link} to='/path' target='_blank'>
React Router has a Link component with generates an HTML <a> element.
I need to generate an <area href=... >.
How can I do it?
You can have Link as child to your component.
<area>
<Link
to={'/path/to/somehwhere}'}>
Click Me
</Link>
</area>
Or you can specify a onclick event handler on area and use hashHistory or browserHistory from react-router to manually navigate user to desired location.
<area onClick={handleClick}>
// your code here
</area>
and handleClick will have
handleClick = (): void => {
hashHistory.push('/path/to/somehwhere'); // or browserHistory
}
In these both ways you can achieve your desired behavior. You can read more about navigating users programmatically here.
Edit: I forgot to mention that you can also wrap your whole component inside Link.
<Link to='/path/to/somewhere'>
<area />
</Link>