Html 如何使放置在链接标记内的div成为非导航的

我有一块瓷砖。我把我的完整代码保存在Link标签中，这样每当我点击div的任何部分时，它就会导航到新页面。但是在链接标签里面，有一个subdiv，点击它我不想执行重定向。 我面临的问题是，如果我将在我不想执行重定向的特定div之前关闭link标记，那么父div的剩余区域也将变得不可单击，除了写入的p标记。我如何才能使特定的div不可重定向

       <Link to={{ pathname: '/demo_summary/'>
            <div className="ctd-tile" style={{ margin: "10px", height"260px" }}>
              <p>VERSION: {i.version}</p><br />
              <p>Complexity: {i.complexity}</p><br />

              <div className="col-md-4">}}>
                  <img src={require("../images/icon1.png")} title="DEMO PLAN" /></Link>
              </div>

              <div className="col-md-4">
                <input type="image"  title="View HTML" src={require("../images/viewAsHtml.png")} style={{width: "40%", cursor: "pointer"}} onClick={(e) => { e, that.openReport(e, i.demoName) }}/>
              </div>

              <div className="col-md-4">
                <Download file={i.name} content={text}>
                  <img src={require("../images/download.png")} title="DOWNLOAD" style={{ width: "25%", cursor: "pointer" }} />
                </Download>
              </div>
            </div>
          </Link>

版本：{i.VERSION}


复杂性：{i.Complexity}


}}>
{e，that.openReport（e，i.demoName）}/>

我想使标题为“查看HTML”的第二个div不可重定向。

您需要在要停止重定向的

div的
onClick
上使用

       <Link to={{ pathname: '/demo_summary/'>
            <div className="ctd-tile" style={{ margin: "10px", height"260px" }}>
              <p>VERSION: {i.version}</p><br />
              <p>Complexity: {i.complexity}</p><br />

              <div className="col-md-4">}}>
                  <img src={require("../images/icon1.png")} title="DEMO PLAN" /></Link>
              </div>

              <div className="col-md-4">
                <input type="image"  title="View HTML" src={require("../images/viewAsHtml.png")} style={{width: "40%", cursor: "pointer"}} onClick={(e) => { e, that.openReport(e, i.demoName) }}/>
              </div>

              <div className="col-md-4">
                <Download file={i.name} content={text}>
                  <img src={require("../images/download.png")} title="DOWNLOAD" style={{ width: "25%", cursor: "pointer" }} />
                </Download>
              </div>
            </div>
          </Link>

当您有嵌套的标记时，如果您单击一个标记，您将触发标记的
onClick
，并且父
onClick


函数应用程序（）{
返回(
console.log（'parent onClick'）}>
console.log（'button click'）}>单击我
)
}
const rootElement=document.getElementById（“app”）；
render（，rootElement）
将
历史记录作为道具传递给您的组件，然后使用推送重定向或停止事件

e.stopPropagation();

示例：

const navigation = ({ history }) => {
      return (
        <div>
          <a
            onClick={() => {
              history.push("/cool");
            }}
          >
            rediction
            <span
              onClick={e => {
                e.stopPropagation();
              }}
            >
              none redirection
            </span>
          </a>
        </div>
      );
    };

const导航=（{history}）=>{
返回(
{
历史推送（“/酷”）；
}}
>
预测
{
e、 停止传播（）；
}}
>
无重定向
);
};
e.stopPropagation（）不是helping@AnjaliChaudhary检查代码片段。父项将是
链接
，按钮将是不重定向的div。如果它不起作用，请解释一下你在做什么，也许你把它添加到了错误的地方{e.stopPropagation（）}>{e，that.openReport（e，item.modelName）}/>在div上，我只有一个onClick。第二次单击是针对我已添加到该div的映像，我正在调用一个不同的函数，该函数负责执行api调用和其他功能。是否也向映像添加
stopPropagation
？