时间戳

首页 > 解决方案 > 如何通过单击 Reactjs 中的图像打开页面？

reactjs - 如何通过单击 Reactjs 中的图像打开页面？

问题描述

在我的 React 项目中，我创建了某些带有图像的卡片。当单击该图像时，它预计会在新窗口/页面中打开该特定产品的详细信息，但是这不会发生。请看下面的代码。

项目.js

<Link to={{ pathname: `/details/${data.id}`}}>
          <MDBCardImage className="img-fluid" src={data.img}
          waves style={{borderRadius:'10px'}} 
          style={{height:'300px', width:'310px'}}
          />
</Link>

应用程序.js

<BrowserRouter>
     <Switch>
       <Route path="/details/:id" component={Details}/>
     </Switch>
</BrowserRouter>

这是正确的方法还是我必须做一些改变。任何解决方案？

标签： reactjs

解决方案

这是您在沙盒中改进的代码。

改进了沙箱中的代码。

index.js

ReactDOM.render(
  <BrowserRouter>
    <TransitionGroup>
      <CSSTransition timeout={280} classNames="fade">
        <BrowserRouter>
          <Switch>
            <Route path="/" exact component={App} />
            <Route path="/details/:id" exact component={Details} />
          </Switch>
        </BrowserRouter>
      </CSSTransition>
    </TransitionGroup>
  </BrowserRouter>,
  document.getElementById("root")
);

应用程序.js

return (
      <div>
        <Layout fixedHeader>
          <div className="menu">
            <a href="/">
              <span>Home</span>
            </a>
            <a href="#section_1">
              <span>Projects</span>
            </a>
          </div>
        </Layout>
        <Content style={{ width: "100%" }}>
          <Projects />
        </Content>
      </div>
    );

项目.js

  <Link to={{ pathname: `/details/${data.id}`, data: data }}>
       <MDBCardImage
        className="img-fluid"
        src={data.img}
        style={{
        height: "300px",
        width: "310px",
        borderRadius: "10px"
        }}
        />
   </Link>

详细信息.js

render() {
    const { data } = this.props.location;
    return (
      <div style={{ marginTop: "20px" }}>
        <h3>{data.title}</h3>
        <img src={data.img} alt="git-icon" style={{ height: "200px" }} />
      </div>
    );
  }

推荐阅读