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