在使用 react-bootstrap Nav.Link 时使用 react-scroll (Link)？答案

【问题标题】：Using react-scroll (Link) while using react-boostrap Nav.Link?在使用 react-bootstrap Nav.Link 时使用 react-scroll (Link)？
【发布时间】：2020-05-11 22:03:15
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs react-bootstrap smooth-scrolling

【解决方案1】：

由于 Nav.Link 和 Link 都是渲染到 <a> 的组件，因此您不能在 Nav.Link 中包含 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>

【讨论】：

我仍然无法设置滚动动画。我已经编辑了我的头文件并进行了更改。

【解决方案2】：

解决方案：

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>

【讨论】：

【解决方案3】：

可能为时已晚，但希望其他为此苦苦挣扎的人会发现这很有帮助

对我来说，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

【讨论】：