CODEWITHSUNDEEP
reactjsreact-scroll
Jovan Belic
Jovan Belic

Reputation: 21

Page won't scroll with react-scroll

It looks like there is no trigger at all when I click specific item in Navbar, at one point it kinda worked, url was at least changing when I click li, but now even that doesn't work.

Beside this, I have also set the ID for each of the components.

This is App.js

import React, { useState } from 'react';

import logo from './icons/logo.svg';

import Landing_Nav from './pages/landing/Landing_Nav';
import Landing_Hero from './pages/landing/Landing_Hero';
import Landing_Organization from './pages/landing/Landing_Organization';
import Landing_Toolkit from './pages/landing/Landing_Toolkit';
import Landing_Idea from './pages/landing/Landing_Idea';

import './styles/root.scss';

function App() {
    return (
        <div className="landing_content">
            <Landing_Nav />
            <Landing_Hero />
            <Landing_Organization />
            <Landing_Toolkit />
            <Landing_Idea />                      
        </div>
    )
}

export default App;

This is Landing_Nav.js

import React, { useState } from 'react';

import logo from '../../icons/logo.svg';

import '../../styles/root.scss';
import '../../styles/landing-navigation.scss';

import { Link } from "react-scroll";

function Landing_Nav() {
    return (
        <div className="navigation">
            <img src={logo} className="logo-img"/>
            <div className="nav-right-content">
                <ul className="nav-on-page">
                    <Link
                        activeClass=""
                        to="organization-link"
                        spy={true}
                        smooth={true}
                        offset={-70}
                        duration= {500}
                    ><li>Organization</li></Link>                              
                </ul>
                <button className="btn-primary">Create Together</button>
            </div>
        </div>                                  
    )
}

export default Landing_Nav;

Upvotes: 2

Views: 666

Answers (1)

BitSteven
BitSteven

Reputation: 301

Inside your Landing_Organization component you have the id of that component set to "organization-link". I believe you need to set the name attribute to "organization-link" for the react-scroll library to work as intended.

Upvotes: 0

Related Questions