Hash link scroll functionality for React Router

by React

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

View Demo Download Source 
$ yarn add react-router-hash-link
# OR
$ 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>

// In YourComponent.js
...
import { NavHashLink as NavLink } from 'react-router-hash-link';
...
// Use it just like a RRv4 <NavLink> (see RRv4 api for details):
<NavLink
  to="/some/path#with-hash-fragment"
  activeClassName="selected"
  // etc...
>Link to Hash Fragment</NavLink>

Scrolling API

smooth: boolean

  • Smooth scroll to the element
  • React Router Hash Link uses the native Element method element.scrollIntoView() for scrolling, and when the smooth prop is present it will call it with the smooth option, element.scrollIntoView({ behavior: 'smooth' })
  • Note that not all browsers have implemented options for scrollIntoView - see MDN and Can I Use - there is also a browser polyfill for smooth scrolling which you can install separately so smooth will work in all browsers
import { HashLink as Link } from 'react-router-hash-link';
<Link smooth to="/path#hash">Link to Hash Fragment</Link>

scroll: function

  • Custom scroll function called with the element to scroll to, e.g. const myScrollFn = element => {...}
  • This allows you to do things like scroll with offset, use a specific smooth scrolling library, or pass in your own options to scrollIntoView
import { HashLink as Link } from 'react-router-hash-link';
<Link
    to="/path#hash"
    scroll={el => el.scrollIntoView({ behavior: 'instant', block: 'end' })}
>Link to Hash Fragment</Link>

The exported components are wrapped versions of the Link and NavLink exports of react-router-dom. In some cases you may need to provide a custom Link implementation.

For example, the gatsby static site generator requires you to use its implementation of Link. You can wrap it with the genericHashLink function of this package.

import { genericHashLink } from 'react-router-hash-link';
import GatsbyLink from 'gatsby-link';

const MyHashLink = (props) => genericHashLink(props, GatsbyLink);

const MyComponent = () => (
  <div>
    The default wont work for you?
    <MyHashLink to="/faq#how-to-use-custom-link">No problem!</MyHashLink>
  </div>
);

GitHub