First of all I want to apologize for this dumb question, I'm a real beginner in webdev.
I'm trying to make a component of a clickable image that redirect us to another page of the website. I doesn't get any error but the image does not display (I have a ? on my webpage) and when I click on this "?" I'm not redirected at all.
Here is my component (in src/components/LinkPicture.js)
import { Link } from 'react-router-dom';
export default function LinkPicture(link, imgSrc) {
return(
<Link to={link}>
<img src={imgSrc} />
</Link>
)
}
And here is my page component (in src/pages/intraje/Home.js, the image in src/assets/logo_SEIO_color_head.png)
import React from 'react'
import LinkPicture from '../../components/LinkPicture';
import logo from "../../assets/logo_SEIO_color_head.png"
const Home = () => {
return (
<div className='home'>
<React.Fragment>
<h1>Home</h1>
<LinkPicture link={"intraje/profile"} imgSrc={logo}> </LinkPicture>
</React.Fragment>
</div>
)
}
export default Home;
What are my errors ? thanks by advance :)
CodePudding user response:
import { Link } from 'react-router-dom';
export default function LinkPicture({link, imgSrc}) { // modification here
return(
<Link to={link}>
<img src={imgSrc} />
</Link>
)
}
now your props are passed.