反应路由器链接包装div背景不显示答案

【问题标题】：react router Link wrap div background doesn't show up反应路由器链接包装div背景不显示
【发布时间】：2020-05-06 01:18:56
【问题描述】：

刚遇到 react-router <Link> 的有线问题，当我在其中包装带有背景的 div 时，它不显示图像，但如果我注释掉链接，背景可以显示，有人吗遇到同样的问题？

       <Link to={{
                    pathname: "/productDetail",
                    search: "?productId=" + props.product.productid
                }}>
                <div
                    className="image"
                    style={{
                        backgroundImage: `url(correctURL)`
                    }}
                />
       </Link>

网址是正确的，我可以保证当我注释掉链接时它可以正常工作。

更新：不工作的一个：

  <Link to={{
                    pathname: "/productDetail",
                    search: "?productId=" + props.product.productid
                }}>
                <div
                    className="image"
                    style={{
                        backgroundImage: `url(correctURL)`
                    }}
                />
   </Link>

sass file:
   .image { 
      width:100%;
      height: 100%;
      background-color: white;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      margin-bottom: 5px;
    }

这是我的解决方案：

  <Link className="link" to={{
                    pathname: "/productDetail",
                    search: "?productId=" + props.product.productid
                }}>
                <div
                    className="image"
                    style={{
                        backgroundImage: `url(correctURL)`
                    }}
                />
  </Link>

sass file:
link {
    text-decoration: none;
    width: 100%;
    height: 100%;
    .image { 
      width:inherit;
      height: inherit;
      background-color: white;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      margin-bottom: 5px;
    }

【问题讨论】：

标签： html css reactjs react-router react-router-dom

【解决方案1】：

这就是你需要定义和放置一些高度的方式。

       <div 
        style={{
        backgroundImage:`url('https://images-eu.ssl-images-amazon.com/images/I/41lMD31ltzL.jpg')`,
        height:'500px'}}>
        </div>

或者

let myUrl = 'https://images-eu.ssl-images-amazon.com/images/I/41lMD31ltzL.jpg';

这样定义

        <div 
        style={{backgroundImage:`url(${myUrl})`,
        height:'500px'}}>
        </div>

【讨论】：

谢谢你的回复，终于搞明白了，是因为我的SASS文件，当我添加链接的时候，SASS结构变了，所以我给div设置的宽高不起作用.