如果你正在使用样式化组件，你可以这样做:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';


const StyledLink = styled(Link)`
    text-decoration: none;

    &:focus, &:hover, &:visited, &:link, &:active {
        text-decoration: none;
    }
`;

export default (props) => <StyledLink {...props} />;

/ / 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>标签内添加style={{textDecoration: 'none'}}

<Link to="first" style={{ textDecoration: 'none' }}>
   <MenuItem style={{ paddingLeft: 13 }}>
         Team 1
   </MenuItem>

为了扩展@Grgur的答案，如果你在检查器中查看，你会发现使用Link组件会给它们预设的颜色值color: -webkit-link。如果你不想让它看起来像一个默认的超链接，你需要覆盖这个textDecoration。

jsx:

<Link className="link">
  test
</Link>

css:

.link{
    text-decoration: none;
}

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

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

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

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

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