2

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;
BitSteven
  • 291
  • 2
  • 11
Jovan Belic
  • 21
  • 1
  • Could you share the `Landing_Organization` component? – BitSteven Dec 27 '21 at 02:15
  • I'm attaching it @BitSteven, it's probably some stupid problem... it's my first time doing React - I'm Product Designer, just trying to build my own product https://imgur.com/gallery/Sy2ln1z – Jovan Belic Dec 27 '21 at 10:48
  • Also, when i run npm start, everything works, but nav links doesnt do anything, if i open console and click something - again, nothing happens – Jovan Belic Dec 27 '21 at 10:52

1 Answers1

0

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.

BitSteven
  • 291
  • 2
  • 11