Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Can't navigate to another page/route using 'react-scroll' with NextJs14

Is it possible to navigate or go to another route using ‘react-scroll‘ with NextJs14?

For example: I want to navigate to the Blog Page.

Or should I use Link from 'next/link' with pathname or params to extract the route name and make it active nav-link using useEffect?

Navbar:

"use client";
import React, { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import { Link as Link1 } from "react-scroll";

export default function Navbar() {

   // other code

  return (
    <nav className={`navbar ${scroll ? "is-sticky" : ""}`} id="navbar">
      <div className="container relative flex flex-wrap items-center justify-between">
        <div
          className={`navigation lg_992:order-1 lg_992:flex  ms-auto ${
            menu ? "" : "hidden"
          }`}
          id="menu-collapse"
        >
          <ul className="navbar-nav" id="navbar-navlist">
            <li className="nav-item ms-0">
              <Link1
                className="nav-link hover:cursor-pointer"
                to="home"
                href="/"
                smooth={true}
                duration={1000}
                activeClass="active"
                spy={true}
              >
                Home
              </Link1>
            </li>
            <li className="nav-item ms-0">
              <Link1
                className="nav-link hover:cursor-pointer"
                to="blogs"
                activeClass="active"
                spy={true}
                hashSpy={true}
                isDynamic={true}
              >
                Blogs
              </Link1>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
}

package.json

{
    "@next/env": "^14.2.5",
    "next": "14.1.0",
    "react": "^18",
    "react-dom": "^18",
    "react-scroll": "^1.9.0"
}
Tags:

2

Answers


  1. 0

    react-scroll is designed for smooth scrolling within the same page or component, not for navigating between different pages or routes in a Next.js application. You should use the Link component from next/link to navigate to different pages or routes. Here’s why and how you should use it:

    "use client";
import React, { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";

export default function Navbar() {
  const [scroll, setScroll] = useState(false);
  const [menu, setMenu] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 100) {
        setScroll(true);
      } else {
        setScroll(false);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <nav className={`navbar ${scroll ? "is-sticky" : ""}`} id="navbar">
      <div className="container relative flex flex-wrap items-center justify-between">
        <div
          className={`navigation lg_992:order-1 lg_992:flex ms-auto ${
            menu ? "" : "hidden"
          }`}
          id="menu-collapse"
        >
          <ul className="navbar-nav" id="navbar-navlist">
            <li className="nav-item ms-0">
              <Link href="/" className="nav-link hover:cursor-pointer">
                Home
              </Link>
            </li>
            <li className="nav-item ms-0">
              <Link href="/blogs" className="nav-link hover:cursor-pointer">
                Blogs
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
}

    Why react-scroll Isn’t Suitable for Route Navigation
    Page Navigation vs. Scrolling: react-scroll is meant for scrolling to specific sections of a page, not for navigating to different routes or pages. When you need to navigate to another page, you should use a routing mechanism like next/link.

    Routing and Page Transitions: Next.js uses its routing system to handle navigation between different pages. Using react-scroll for routing won’t work because it can’t handle page transitions.

    Login or Signup to reply.
  2. 0

    I have explained this in detail in my blog. You can check it out: Can’t navigate to another page/route using ‘react-scroll’ with NextJs14

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search