你可以在Link组件中添加style={{textDecoration: 'none'}}来删除下划线。你也可以在样式块中添加更多的css，例如style={{textDecoration: 'none'， color: 'white'}}。

<h1>
  <Link style={{ textDecoration: 'none', color: 'white' }} to="/getting-started">
    Get Started
  </Link>
</h1> 

Just

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

CSS解决方案也用于React

只在Link(React Router)标签中添加className/class。(最重要的部分!!在链接标签中添加ClassName，而不是其他标签。) 在css文件中添加text-decoration: none。

Nav.js

  <Link to="/" className="link" >
    Get Started
  </Link>

Nav.css

.link{
text-decoration: 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>

核心方法在app。css(或对应版本)中

a{
  text-decoration: none;
}

这防止下划线为所有<a>标签，这是这个问题的根本原因

a:-webkit-any-link {
  text-decoration: none;
  color: inherit;
}