react-router-hash-link

What is react-router-hash-link?

The react-router-hash-link package is a utility for React Router that allows you to link to specific sections within a page using hash links. It provides smooth scrolling and ensures that the target element is brought into view.

What are react-router-hash-link's main functionalities?

Hash Link Navigation

This feature allows you to create links that navigate to specific sections of the page using hash links. The 'smooth' prop enables smooth scrolling to the target section.

import { HashLink as Link } from 'react-router-hash-link';

function App() {
  return (
    <div>
      <nav>
        <Link smooth to="#section1">Go to Section 1</Link>
        <Link smooth to="#section2">Go to Section 2</Link>
      </nav>
      <div id="section1" style={{ height: '100vh' }}>Section 1</div>
      <div id="section2" style={{ height: '100vh' }}>Section 2</div>
    </div>
  );
}

Custom Scroll Behavior

This feature allows you to define custom scroll behavior when navigating to a hash link. The 'scroll' prop accepts a function that defines how the scrolling should be handled.

import { HashLink as Link } from 'react-router-hash-link';

const customScroll = (el) => {
  el.scrollIntoView({ behavior: 'smooth', block: 'end' });
};

function App() {
  return (
    <div>
      <nav>
        <Link to="#section1" scroll={customScroll}>Go to Section 1</Link>
        <Link to="#section2" scroll={customScroll}>Go to Section 2</Link>
      </nav>
      <div id="section1" style={{ height: '100vh' }}>Section 1</div>
      <div id="section2" style={{ height: '100vh' }}>Section 2</div>
    </div>
  );
}

Other packages similar to react-router-hash-link

react-scroll

The react-scroll package provides smooth scrolling functionality for React applications. It allows you to create links that scroll to specific elements on the page. Unlike react-router-hash-link, react-scroll is not tied to React Router and can be used independently.

react-anchor-link-smooth-scroll

The react-anchor-link-smooth-scroll package offers smooth scrolling to anchor links within a React application. It is similar to react-router-hash-link but does not require React Router and can be used with any routing solution or even without a router.

README

React Router Hash Link

Note that this is for React Router v4, for v2/3 see this solution.

Live Example

This is a solution to React Router's issue of not scrolling to #hash-fragments when using the <Link> component to navigate.

When you click on a link created with react-router-hash-link it will scroll to the element on the page with with the id that matches the #hash-fragment in the link. This will also work for elements that are created after an asynchronous data load. Note that you must use React Router's BrowserRouter for this to work.

$ npm install --save react-router-hash-link

// In YourComponent.js
...
import { HashLink as Link } from 'react-router-hash-link';
...
// Use it just like a RRv4 link (to can be a string or an object, see RRv4 api for details):
<Link to="/some/path#with-hash-fragment">Link to Hash Fragment</Link>