使图像充当路由器到另一个页面

Question

我正在使用React来开发网站，并且我有一些图像，希望它们可以使用React Router单击其他页面。 我已经使用路由器制作了标头，但同一代码系统不适用于图像。 这是我的代码：

这是我希望图像位于其中的页面内部（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>

这是我的App.js页面：

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} />

其余链接用于我之前使用此方法制作的路由器标头，并且工作正常，但是当我对图像尝试使用时，在Gewalt.js页面中仅得到一个空白页面。 正确的方法是什么？

Answer 1

将img标签包装在Link标签内：

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