在使用react-boostrap Nav.Link时使用react-scroll (链接)？

Question

我可以使用react-bootstrap设置响应式导航栏，但是当我尝试使用带有Nav.Link的react-scroll链接时

<Nav.Link href='projects'>
  <Link 
     activeClass='active'
     to='homepage'
     spy={true}
     smooth={true}
     offset={-70}
     duration= {500}
  >
  Projects
  </Link>
</Nav.Link>

我会在浏览器上看到一个错误，显示为<a> cannot appear as a descendant of a <a>。我试着把Nav.Link改成Nav.Item，并相应地改变了链接的样式，但是一旦我移除了Nav.Link，我的手机导航栏中的collapseOnSelect功能就会停止工作。

import React from 'react';
import Scroll from 'react-scroll';

import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';

import { ReactComponent as GithubIcon } from '../../assets/github.svg';
import { ReactComponent as TwitterIcon } from '../../assets/twitter.svg';

class Header extends React.Component {

  render() {
    return (
      <div className='header' style={{ fontFamily: 'Fira Code, monospace' }}>
        <Navbar className='shadow-lg' style={{ backgroundColor: '#2C3E50' }} collapseOnSelect expand="lg" fixed="top">
          <Navbar.Brand onSelect={() => Scroll.scrollTo('Homepage', {
            smooth: true,
                offset: -70,
                duration: 500
          })}>
            Name
          </Navbar.Brand>
          <Navbar.Toggle aria-controls='responsive-navbar-nav'/>
          <Navbar.Collapse id='responsive-navbar-nav'>
            <Nav className='mr-auto'>
              <Nav.Link onSelect={() => Scroll.scrollTo('projects', {
                smooth: true,
                offset: -70,
                duration: 500
              })}>
                Projects
              </Nav.Link>
              <Nav.Link onSelect={() => Scroll.scrollTo('contact', {
                smooth: true,
                offset: -70,
                duration: 500
              })}>
                Contact
              </Nav.Link>
            </Nav>
            <Nav className='ml-auto'>
              <Nav.Link
                href='https://github.com/jgil-r'
                target='_blank'
                rel='noopener noreferrer'
                style={{
                  paddingLeft: '.5rem',
                  paddingRight: '.5rem'
                }}
              >
                <GithubIcon />
              </Nav.Link>
              <Nav.Link
                href='https://twitter.com/chuygil7273'
                target='_blank'
                rel='noopener noreferrer'
                style={{
                  paddingLeft: '.5rem',
                  paddingRight: '.5rem'
                }}
              >
                <TwitterIcon />
              </Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
    );
  }
}

export default Header;

import React from 'react';

import './projects.styles.scss';

const Projects = () => (
  <div className='projects-container' id='projects'>
    <h1>Projects</h1>
  </div>
);

export default Projects;

Answer 1

因为Nav.Link和链接都是呈现给<a>的组件，所以不能在Nav.Link中包含链接。

可以使用Nav.Link的onSelect属性添加滚动效果(并从react-scroll中删除链接)，或者将Nav.Link as属性设置为div。

import Scroll from 'react-scroll';

// ...
<Nav.Link
onSelect={() => Scroll.scrollTo('homepage', {
    smooth: true,
    offset: -70,
    duration: 500,
})}
>

</Nav.Link>

Answer 2

可能太晚了，但希望其他在这方面努力的人能发现这一点有帮助

对我来说，Scroll.ScrollTo不能工作

相反，尝试导入scroller并使用scrollTo，如下所示

import { scroller } from "react-scroll";
//...
<Nav.Link
onClick={() => scroller.scrollTo('homepage', {
    smooth: true,
    offset: -70,
    duration: 500,
})}
>

</Nav.Link>

注意:我也在使用onClick而不是onSelect

Answer 3

解决方案：

import { Link } from "react-scroll";
//...
<Nav className="mr-auto">
       <li className="nav-item">
          <Link
              href="#home"
              to="home"
              activeClass="active"
              className="nav-link"
              spy={true}
              smooth={true}
              offset={-70}
              duration={500}
              >
               Home
              </Link>
       </li>
</Nav>