Using react-scroll (Link) while using react-boostrap Nav.Link?

Question

I was able to set up responsive navbar using react-bootstrap, but when I tried using Link from react-scroll withing Nav.Link

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

I would get an error on the browser stating <a> cannot appear as a descendant of a <a>. I tried to change Nav.Link to Nav.Item and change styles of link accordingly, but once I remover Nav.Link the collapseOnSelect feature stops working in my Navbar for mobile.

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

Since both Nav.Link and Link are components that render to <a> you can't include a Link inside of a Nav.Link.

You can use the onSelect property on the Nav.Link to add scrolling effects (and remove the Link from react-scroll) or set the Nav.Link as property to div.

import Scroll from 'react-scroll';

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

</Nav.Link>