如何在img单击上重定向到另一个组件（材料UI）

由丑病难医发布于 2020-04-09 03:08:26

I am using material UI for React and I want to redirect to another component (Dashboard) on image click : the click event is on an image (<img/>), here's what i have tried but it's not working:

           <Switch>
            <img src={cap1} alt="cap1"  className="img-avatar" style={{width:"100px"}} />
            <Route path="/app/dashboard" component={Dashboard} />                   
           </Switch>

谢谢！

编辑：第二次尝试不起作用。

<Switch>
     <Route path="/images/Capture.JPG" />
      <Route path="/app/dashboard" component={Dashboard} />            
</Switch>
<img src={cap1} onClick={()=>{ props.history.push("/app/dashboard") }} />

xipsam

2020-04-09 03:08:26

首先，您不能将Img组件作为子级传递给Switch组件，它应该是具有明确定义路径的另一个Route，并且您的Img组件上没有任何点击处理程序。好吧，您要做的就是在Switch内部设置路由，一个用于path =“ / app / dashboard”，另一个用于path =“ / url_with_image”或您决定的名称，这将是包含图像的路径。然后在img组件上传递点击处理程序

<img src={cap1} onClick={()=>{ props.history.push("/app/dashboard") }} />

编辑：我的意思是这样

import {Switch, Route} from 'react-router-dom'
import comp1 form '../some-path'

const ImageComp = (props) => {
  return (
      <img src={comp1} onClick={() => {
           props.history.push('/app/dashboard')
      }}/>
  )
}

const Dashboard = (props) => {
  // replace with your Dashboard component
}

export default (props) => {
  return (
    <Switch>
      <Route path="/image" component={ImageComp}/>
      <Route path="/app/dashboard" component={Dashboard}/>
    </Switch>
  )
}

丑病难医

这家伙很懒，什么都没留下

积分
0
话题
0
评论
3217
注册排名
1874