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

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} />;

<Link to="/page">
    <Box sx={{ display: 'inline-block' }}>
        <PLink variant="primary">Page</PLink>
    </Box>
</Link>

在某些情况下，当在Gatsby <Link>组件中使用另一个组件时，在内部组件周围添加带有display: 'inline-block'的div，可以防止下划线(在示例中为'Page')。

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

就这么简单!

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

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

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

下划线默认来自react-router-dom包。您可以执行以下操作来修复此问题。

<Link to="/route-path" style={{ textDecoration: 'none' }}> 
    // Rest of the code
</Link>