Handling Hashes in React/Next.js Applications

Photo by Walls.io on Unsplash

Navigating single-page applications (SPAs) efficiently requires smooth, seamless transitions without full page reloads. This is where URL hashes come into play, particularly in React and Next.js applications, enabling developers to offer users a refined experience. In this article, we’ll explore how to effectively manage hashes for navigation and section scrolling in React and Next.js applications, illustrated with practical examples.

Understanding Hash-based Navigation

Hash-based navigation uses the URL’s hash (#) to denote different states or sections within a page. When a user interacts with elements that modify the hash, the application can respond without reloading the page, often by showing or hiding content or scrolling to a specific section.

This technique is especially useful in SPAs where the smooth transition between sections is crucial for user experience. React and Next.js, popular JavaScript libraries and frameworks for building SPAs, provide built-in and custom hooks that make managing hash-based navigation straightforward.

Implementing Hash Navigation in React

Let’s start with a simple React example that demonstrates scrolling to different sections of a page based on the URL hash.

Step 1: Setup and Structure

Assume we have a single-page application with multiple sections: Home, Skills, Experience, Projects, and Blog. Each section has a corresponding button in the navigation bar, which, when clicked, scrolls the user to that section.

First, let’s define a scrollToSection function and a useHash custom hook to manage the hash changes:

// utils.js
export const scrollToSection = (id) => {
  const element = document.getElementById(id);
  if (element) {
    element.scrollIntoView({
      block: "start",
      behavior: "smooth",
    });
    window.location.hash = `#${id}`;
  }
};

Step 2: Creating the useHash Hook

This custom hook listens for changes in the URL’s hash and updates the component state accordingly.

// useHash.js
import { useState, useEffect } from 'react';

export const useHash = () => {
  const [hash, setHash] = useState(window.location.hash);
  useEffect(() => {
    const onHashChange = () => {
      setHash(window.location.hash);
    };
    window.addEventListener('hashchange', onHashChange);
    return () => window.removeEventListener('hashchange', onHashChange);
  }, []);
  return hash;
};

Step 3: Implementing Navigation

With our useHash hook and scrollToSection function, we can now implement a navigation component that responds to hash changes.

// Navbar.js
import { useEffect } from 'react';
import { useHash } from './useHash';
import { scrollToSection } from './utils';

const Navbar = () => {
  const hash = useHash();
  useEffect(() => {
    const section = hash.replace("#", "");
    if (section) scrollToSection(section);
  }, [hash]);
  return (
    <nav>
      <button onClick={() => scrollToSection('home')}>Home</button>
      <button onClick={() => scrollToSection('skills')}>Skills</button>
      <button onClick={() => scrollToSection('experience')}>Experience</button>
      <button onClick={() => scrollToSection('projects')}>Projects</button>
      <button onClick={() => scrollToSection('blog')}>Blog</button>
    </nav>
  );
};
export default Navbar;

Step 4: Setting Up Sections

Each section in your SPA should have an id that matches the ones used in the scrollToSection calls. This ensures the function can find the correct DOM element to scroll into view.

<div id="home">Home Section</div>
<div id="skills">Skills Section</div>
<div id="experience">Experience Section</div>
<div id="projects">Projects Section</div>
<div id="blog">Blog Section</div>

Conclusion

Hash-based navigation offers a method for enhancing user experience in SPAs by enabling smooth, seamless transitions between page sections without reloading. By utilizing custom hooks like useHash and utility functions, developers can easily implement this pattern in React and Next.js applications.

Remember, the key to effective hash management lies in listening for changes, responding appropriately, and ensuring your application’s structure supports smooth scrolling and navigation. With these techniques, you can create more interactive, user-friendly Single page Application.