Использование response-scroll (Link) при использовании response-boostrap Nav.Link? - PullRequest
Новая
       76

Использование response-scroll (Link) при использовании response-boostrap Nav.Link?

2 голосов
/ 26 января 2020

Мне удалось настроить отзывчивую навигационную панель с помощью response- bootstrap, но когда я попытался использовать Link from response-scroll с помощью Nav.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 перестает работать в моем Navbar для мобильных устройств. 

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;

1 Ответ

1 голос
/ 26 января 2020

Поскольку и Nav.Link, и Link являются компонентами, отображающими <a>, вы не можете включить Link внутри Nav.Link.

Вы можете использовать свойство onSelect в Nav. Ссылка для добавления эффектов прокрутки (и удаления ссылки из реагирующей прокрутки) или для свойства Nav.Link as значение div. 

import Scroll from 'react-scroll';

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

</Nav.Link>
...