react-router-hash-link-offset

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

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

// In YourComponent.js
...
import { HashLink as Link } from 'react-router-hash-link-offset';
...
// 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>

Options

• scrollOffset: Number of pixels to add as an offset to the scroll destination. Can be a positive or a negative number.