如何在Reactjs中单击图像打开页面？_Reactjs

如何在Reactjs中单击图像打开页面？

reactjs

如何在Reactjs中单击图像打开页面？,reactjs,Reactjs,在我的React项目中，我创建了一些卡片，上面有图像。当点击该图像时，它将在新窗口/页面中打开该特定产品的详细信息，但是，这不会发生。请参阅下面的代码 Projects.js <Link to={{ pathname: `/details/${data.id}`}}> <MDBCardImage className="img-fluid" src={data.img} waves style={{borderRadius:'10px'}

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

Projects.js

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

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

App.js

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

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>
    );

这是正确的方法还是我必须做一些更改。有解决方案吗？

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

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")
);

ReactDOM.render(
,
document.getElementById（“根”）
);

App.js

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

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>
    );

返回(
);

Projects.js

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

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

Details.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>
    );
  }

render（）{
const{data}=this.props.location；
返回(
{data.title}
);
}

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

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")
);

ReactDOM.render(
,
document.getElementById（“根”）
);

App.js

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

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>
    );

返回(
);

Projects.js

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

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

Details.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>
    );
  }

render（）{
const{data}=this.props.location；
返回(
{data.title}
);
}

正如我们在沙箱中看到的那样，您实际上是在项目下方呈现详细信息页面。您的

Projects

组件位于

BrowserRouter

之上，因此，无论发生什么，您都在渲染项目，这就是为什么您总是在每个页面上看到它的原因。您现在没有主路线，因此如果您需要，可以使用

Projects

。移除路由器外的

项目

，并将其作为主要路由组件。此外，您还需要

精确的道具
<Content style={{ width: "100%" }}>
  <TransitionGroup>
    <CSSTransition timeout={280} classNames="fade">
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Projects} /> 
          <Route path="/details/:id" component={Details} />
        </Switch>
      </BrowserRouter>
    </CSSTransition>
  </TransitionGroup>
</Content>

正如我们在沙箱中看到的那样，您实际上是在项目下方呈现详细信息页面。您的Projects
组件位于BrowserRouter
之上，因此，无论发生什么，您都在渲染项目，这就是为什么您总是在每个页面上看到它的原因。您现在没有主路线，因此如果您需要，可以使用Projects
。移除路由器外的项目
，并将其作为主要路由组件。此外，您还需要精确的道具
<Content style={{ width: "100%" }}>
  <TransitionGroup>
    <CSSTransition timeout={280} classNames="fade">
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Projects} /> 
          <Route path="/details/:id" component={Details} />
        </Switch>
      </BrowserRouter>
    </CSSTransition>
  </TransitionGroup>
</Content>


你能在沙盒中共享你的代码吗？你是说在新标签上吗？你在哪里使用你的链接？我们能看到整个组件和相关组件吗？@devserkan是的，我会编辑帖子，我也会在沙盒上显示我的代码。你能在沙盒中共享你的代码吗？你是说在新选项卡上吗？你在哪里使用你的链接？我们能看到整个组件和相关组件吗？@devserkan是的，我会编辑帖子，也会在沙盒上显示我的代码当点击图片时，它必须重定向到应用程序中定义的详细信息页面。js@Pranav请分享sandbox@Pranav你是这样吃的吗？嘿，谢谢你，伙计。。。如预期的完美答案。。。你几乎完成了我所有的工作work@Pranav我传递数据只是为了显示，你们可以通过细节页面中的id获取特定的细节数据。当点击图片时，它必须重定向到应用程序中定义的细节页面。js@Pranav请分享sandbox@Pranav你是这样吃的吗？嘿，谢谢你，伙计。。。如预期的完美答案。。。你几乎完成了我所有的工作work@Pranav我传递数据只是为了显示，您可以通过详细信息页面中的id获取特定的详细信息数据。