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/5, for v2/3 see this solution.

Demo website (code on the gh-pages branch)

---

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 } from 'react-router-hash-link';
...
// Use it just like a RRv4/5 <Link> (to can be a string or an object, see RRv4/5 api for details)
<HashLink to="/some/path#with-hash-fragment">Link to Hash Fragment</HashLink>

<NavHashLink>

// In YourComponent.js
...
import { NavHashLink } from 'react-router-hash-link';
...
// Use it just like a RRv4/5 <NavLink> (see RRv4/5 api for details)
// It will be active only if both the path and hash fragment match
<NavHashLink
  to="/some/path#with-hash-fragment"
  activeClassName="selected"
  activeStyle={{ color: 'red' }}
  // etc...
>Link to Hash Fragment</NavHashLink>

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 } from 'react-router-hash-link';
<HashLink smooth to="/path#hash">
  Link to Hash Fragment
</HashLink>;

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 } from 'react-router-hash-link';
<HashLink
  to="/path#hash"
  scroll={(el) => el.scrollIntoView({ behavior: 'instant', block: 'end' })}
>
  Link to Hash Fragment
</HashLink>;

Scroll to top of page

• To scroll to the top of the page set the hash fragment to # (empty) or #top
• This is inline with the HTML spec, also see MDN

import { HashLink } from 'react-router-hash-link';
<HashLink to="/path#top">Link to Top of Page</HashLink>
// or
<HashLink to="#top">Link to Top of Page</HashLink>

Scroll with offset

• To scroll with offset use a custom scroll function, one way of doing this can be found here

elementId: string

• Scroll to the element with matching id
• Used instead of providing a hash fragment as part of the to prop, if both are present then the elementId will override the to prop's hash fragment
• Note that it is generally recommended to use the to prop's hash fragment instead of the elementId

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 = genericHashLink(GatsbyLink);

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

Focus Management

react-router-hash-link attempts to recreate the native browser focusing behavior as closely as possible.

The browser native behavior when clicking a hash link is:

• If the target element is not focusable, then focus is moved to the target element, but the target element is not focused.
• If the target element is focusable (interactive elements and elements with a tabindex), then the target element is focused.

To recreate this react-router-hash-link does the following:

• For non-focusable elements, it calls element.focus() followed by element.blur() (using a temporary tabindex to ensure that the element can be focused programmatically) so that focus moves to the target element but does not remain on it or trigger any style changes.
• For focusable elements, it calls element.focus() and leaves focus on the target element.

Note that you may find it useful to leave focus on non-interactive elements (by adding a tabindex) to augment the navigation action with a visual focus indicator.