Just

<Link
   to={`$path`}
   style={{ borderBottom: "none" }}> 
    .... 
</Link>

还有另一种方法可以正确地删除链接的样式。你必须给它的textDecoration='inherit'和color='inherit'的风格，你可以添加这些作为样式的链接标签，如:

<Link style={{ color: 'inherit', textDecoration: 'inherit'}}>

或者为了使它更通用，只需创建一个CSS类:

.text-link {
    color: inherit;
    text-decoration: inherit;
}

然后只需<Link className='text-link'>

style={{ backgroundImage: "none" }}

只有这对我有用

/ / CSS

.navigation_bar > ul > li {
      list-style: none;
      display: inline;
      margin: 2%;
    }

    .link {
      text-decoration: none;
    }

.jsx

 <div className="navigation_bar">
            <ul key="nav">
              <li>
                <Link className="link" to="/">
                  Home
                </Link>
              </li>
            </ul>
          </div>

<Link
   to='/maxpain'
   replace
   style={{
           textDecoration: 'none'
          }}
   >
     <LinkText>Click here!</LinkText>
</Link>

就这么简单!

我解决了一个像你这样的问题。我试着在firefox中检查元素。 我将向你们展示一些结果:

这只是我检查过的元素。“Link”组件将被转换为“a”标签，“to”道具将被转换为“href”属性:

当我点击:hov和选项:hover，这里是结果:

如你所见:悬停有文字装饰:下划线。我只添加到我的css文件:

a:hover {
 text-decoration: none;
}

问题就解决了。但我也在一些其他类(比如你:D)设置了text-decoration: none，这可能会产生一些效果(我猜)。