Reactjs 跳过导航组件中指向主要内容的链接

我试图在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>

{this.props.user.isLoggedIn&&
}
{this.props.user.isLoggedIn
? 
: }

以下是我的主要内容：

<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没有任何与Skiplings相关的特定实现。您只需在此处使用正常的Skipling链接即可：

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

---

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

听起来链接被截获了，您使用的是react路由器吗？如果是，那么可能对您有用