why does react-scroll not clickable

Question

I was using Link to navigate to new page, now I made one page of all components and it's not doing anything on click.

import React, { useState } from 'react'
import cn from 'classnames'
// import Link from 'next/link'
import { Link } from "react-scroll"

import Logo from '../Logo/Logo'

import styles from './Layout.module.scss'

interface ILayoutProps {
    children: React.ReactNode
}

export default function Layout({ children }: ILayoutProps) {
const [activeTab, setActiveTab] = useState('Home')
const navigation = ['#Home', '#About', '#Portfolio', '#Contact']

console.log(activeTab);

return (
    <div>
        <nav className={styles.navContainer}>
            <Link to={'/#Home'}>
                <Logo />
            </Link>

            <ul className={styles.navItems}>
                {navigation.map((nav, index) => {
                    return (
                        <li key={index}>
                            <Link
                                to={`/${nav === '#Home' ? '/' : nav}`}
                                className={cn(styles.linkItem, {
                                    [styles.activeTab]: activeTab === nav
                                })}
                                onClick={() => {
                                    setActiveTab(nav)
                                    console.log(nav)
                                }}
                                spy={true}
                                smooth={true}
                                offset={50}
                                duration={500}
                            >
                                {nav.slice(1)}
                            </Link>
                        </li>
                    )
                })}
            </ul>

            <a className={styles.button} href='assets/Stas_Gavrilov_resume.txt' download>Resume</a>
        </nav>

        <main>{children}</main>
    </div>
)

}

I follow up with the docs on react-scroll but it did not helped to solve my issue :(

It's saying it can't target the section element:

react_devtools_backend.js:4012 target Element not found

Answer 1

You need to remove the / on the to prop in the Link component since the id of the element you want to scroll to has not the id /#Home but #Home.

<Link
  to={`${nav === "#Home" ? "/" : nav}`} // here
  ...
>

Instead of

<Link
  to={`/${nav === "#Home" ? "/" : nav}`}
  ...
>

Note that the id needs to match so the elements you want to scroll to must have the exact id.

Since your list of ids is

const navigation = ["#Home", "#About", "#Portfolio", "#Contact"];

The id of the elements need to contain the #

<>
  <section id="#Home">Home</section>
  <section id="#About">About</section>
  <section id="#Portfolio">Portfolio</section>
  <section id="#Contact">Contact</section>
</>