Skip link to main content from navigation component

Question

I'm trying to add a skip link that goes from my navigation component to my main content component in React. How can I archive this?

this is my nav component:

<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>

here is my main component:

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>

It sounds like the link is being intercepted, are you using react router? If so then perhaps https://stackoverflow.com/questions/40280369/use-anchors-with-react-router would be useful to you — GrahamTheDev, Oct 05 '20 at 17:43

score -1 · Accepted Answer · answered Oct 05 '20 at 17:02

React doesn't have any specific implementation related to skiplinks1. You should simply be able to use normal skip links as you here:

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

If that isn't working, what is the behaviour you aren't seeing?

Skip link to main content from navigation component

1 Answers1