CODEWITHSUNDEEP
reactjsreact-router
lydal
lydal

Reputation: 930

Make Images act like Routers to another page

I'm using React for developing a website, and I have some images that I want them to be clickable to other pages using react router. I already have made a header using routers but the same code system does not work for images. this is my code:

This is inside the page that I want the images to be inside (Gewalt.js):

 import { Link } from 'react-router-dom'
    <center>
         <img src={Phys} className='img' alt='Phys' ><Link 
         to='/src/GewaltContent/Physische.js'> </Link></img>
    </center>

And this is my App.js Page:

import Gewalt from './Header/Gewalt'
import Physische from './GewaltContent/Physische'
import Psychische from './GewaltContent/Psychische'
import Strukturelle from './GewaltContent/Strukturelle'
import { BrowserRouter as Router, Route } from 'react-router-dom' 
<Route path='/src/GewaltContent/Physische.js' component={Physische} />
<Route path='/src/GewaltContent/Psychische.js' component={Psychische} />
<Route path='/src/GewaltContent/Strukturelle.js' component={Strukturelle} />

The rest of the links are for the router header I made before with this method and it works fine, but when I try this for the images I just get a blank page in the Gewalt.js page. what is the correct method?

Upvotes: 1

Views: 44

Answers (1)

xyres
xyres

Reputation: 21734

Wrap img tag inside Link tag:

<Link to='/src/GewaltContent/Physische.js'>
    <img src={Phys} className='img' alt='Phys' />
</Link>

Upvotes: 2

Related Questions