React Router Hash Link

 

This is a solution to React Router's issue of not scrolling to #hash-fragments when using the 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.

---

$3

Code is in the /demo folder, or open the demo in CodeSandbox

---

Basics

``shell
npm install --save react-router-hash-link
`

react-router-dom is a peer dependency.

---

$3

`js
import { HashLink } from 'react-router-hash-link';

...

// use it just like a RRv4/5
// the to prop can be a string or an object, see RRv4/5 api for details
Link to Hash Fragment
`

---

$3

`js
import { NavHashLink } from 'react-router-hash-link';

...

// use it just like a RRv4/5 (see RRv4/5 api for details)
// it will be active only if both the path and hash fragment match
to="/some/path#with-hash-fragment"
activeClassName="selected"
activeStyle={{ color: 'red' }}
// etc...
>Link to Hash Fragment
`

---

Scrolling API

$3

- 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

`js
import { HashLink } from 'react-router-hash-link';

...


Link to Hash Fragment
;
`

---

$3

- 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

`js
import { HashLink } from 'react-router-hash-link';

...

to="/path#hash"
scroll={(el) => el.scrollIntoView({ behavior: 'auto', block: 'end' })}
>
Link to Hash Fragment
;
`

---

$3

- 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

`js
import { HashLink } from 'react-router-hash-link';

...

Link to Top of Page
// or
Link to Top of Page
`

---

$3

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

---

$3

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

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

const MyHashLink = genericHashLink(GatsbyLink);

const MyComponent = () => (



);
`

---

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 of -1`) to augment the navigation action with a visual focus indicator.