skip to Main Content

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"
}

2

Answers


  1. 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. 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