methuselah96 / react-router-hash-link

Hash link scroll functionality for React Router

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

$ yarn add react-router-hash-link
# OR
$ npm install --save react-router-hash-link

<HashLink>

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

<NavHashLink>

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

Custom 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>
);