从导航组件跳过指向主要内容的链接答案

【问题标题】：Skip link to main content from navigation component从导航组件跳过指向主要内容的链接
【发布时间】：2020-10-05 16:48:53
【问题描述】：

我正在尝试添加一个跳过链接，该链接从我的导航组件到 React 中的主要内容组件。我该如何存档？

这是我的导航组件：

<Navbar className='navbar-black'>
        <Navbar.Header>
          <Navbar.Toggle />
        </Navbar.Header>
        <Navbar.Collapse>
          <Nav className='navbar-right'>
            <NavItem basePath={basePath} destination='pricing' text='Pricing' />
            <NavItem basePath={basePath} destination='tools' text='Tools' />
            {this.props.user.isLoggedIn &&
              <NavItem basePath={basePath} destination='dashboard'
                text={`Dashboard${notificationsLength ? ` (${notificationsLength})` : ''}`} />}
            {this.props.user.isLoggedIn
              ? <NavItem basePath={basePath} destination='' text='Log Out' onClick={this.logout} />
              : <NavItem basePath={basePath} destination='login-signup' text='Log In / Sign Up' />}
              <a className='skip-link' href='#landing-page'> Skip to main content </a>
          </Nav>
        </Navbar.Collapse>
      </Navbar>

这是我的主要组件：

export default function LandingPage(props) {
  return (
    <div className='landing-page' id='landing-page'>
      <div className='landing-cta-panel'>
        <div className='landing-cta-content container'>
          <div className='landing-cta-copy'>
            <h1>blahblah</h1>
            <Link to='/tools'><button className='landing-find-tool-btn'>Find Your Tool</button></Link>
          </div>

【问题讨论】：

好像链接被拦截了，你用的是react router吗？如果是这样，那么stackoverflow.com/questions/40280369/… 可能对你有用

标签： reactjs accessibility

【解决方案1】：

React 没有任何与 skiplinks1 相关的具体实现。您应该可以像这里一样使用普通的跳过链接：

<a className='skip-link' href='#landing-page'> Skip to main content </a>

如果这不起作用，您没有看到什么行为？

【讨论】：