Anchor Link Libraries not working at all in my React project

Question

I have tried multiple anchor link libraries for ease of active classes in order to scroll to sections of my page when clicking through the nav bar. Using a normal anchor element, as in <a href='#content'>test</a> snaps to the element with the corresponding ID, however no scroll libraries have worked at all. My latest attempt, React-Scroll, for example. Here is my nav component (simplified for readability):

import React from 'react'
import styled from 'styled-components'
import styles from './SideNav.module.scss'
import { FaGithubSquare, FaLinkedin } from 'react-icons/fa'
import { Link, animateScroll as scroll } from 'react-scroll'

const SideNav = () => {   
    return(
        <div className={styles.sideNav}>
            <div className={styles.navElements}>
                <section className={styles.brand}>
                    <h1 className={styles.name}>Josh Bangle</h1>
                    <h3>Web Dev. Voice Actor. Dad. Nerd.</h3>              
                </section>
                <ul className={styles.navList}>
                    <Link to='test1' spy={true} smooth={true} offset={50} duration={500}>test link</Link>
                </ul>
                <div className={styles.socials}>
                    <a href='https://www.github.com/joshbangle' rel="noopener noreferrer" target='_blank' className={styles.github}><FaGithubSquare size={50} /></a>
                    
                    <a href='https://www.linkedin.com/in/joshbangle' rel="noopener noreferrer" target='_blank' className={styles.linkedin}><FaLinkedin size={50} /></a>
                </div>
            </div>
        </div> 
    )
}
export default SideNav

And the component with the corresponding ID in it:

import React from 'react';
import styled from 'styled-components'

const Contact = () => {
    return (
        <section id='test1'>
            <ContactContent>
                <Headline>Contact me</Headline>
                <h1>Feel free to reach out to me through LinkedIn, or email me directly at:</h1>
                <Email>joshua.bangle@gmail.com</Email>
            </ContactContent>
        </section>
    );
}

export default Contact;

I have tried multiple packages, multiple ways of writing the anchor, and just nothing at all happens. I'm starting to wonder if somehow another package I have installed is interfering with the scroll functionality of packages. If that is possible at all, I can link to the github repo if anyone is willing to check it out. Thanks in advance for any help.

looks ok https://codesandbox.io/s/adoring-glade-webm6?file=/src/App.js - there must be an error printed in the javascript console. could be that the error is preventing execution of other scripts. i'd start checking there — 95faf8e76605e973, Aug 17 '20 at 03:48

score 0 · Answer 1 · answered Aug 18 '20 at 20:30

I found my issue. I was using a layout component with the following code:

import React from 'react';

import SideNav from '../SideNav/SideNav'
import styled from 'styled-components'
import Skillset from '../Skillset/Skillset'
import Projects from '../Projects/Projects'
import Contact from '../Contact/Contact'
import TestNav from '../../TestNav'



const LayoutWrapper = styled.div`
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
`

const ContentWrapper = styled.div`
    display: block;
    height: 100vh;
    width: 100%;
    margin-left: 300px;
    overflow: auto;
`

const Layout = (props) => {


    return (
        <LayoutWrapper>
            <TestNav />
            <SideNav  />
            <ContentWrapper>
                <Skillset/>
                <Projects/>
                <Contact/>
            </ContentWrapper>
            
        </LayoutWrapper>
    );
}

export default Layout;

The overflow styling was somehow getting in the way of the anchor function. I've removed that and have refactored my code to better implement the sticky side bar feature I was going for. I'm not entirely sure why the overflow was having this effect, but removing it fixed the issue for me.

Anchor Link Libraries not working at all in my React project

1 Answers1