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.
Code is in the /demo
folder, or open the demo in CodeSandbox
npm install --save react-router-hash-link
react-router-dom
is a peer dependency.
<HashLink>
import { HashLink } from 'react-router-hash-link';
...
// use it just like a RRv4/5 <Link>
// the `to` prop 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>
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>
smooth: boolean
element.scrollIntoView()
for scrolling, and when the smooth
prop is present it will call it with the smooth option, element.scrollIntoView({ behavior: 'smooth' })
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 browsersimport { HashLink } from 'react-router-hash-link';
...
<HashLink smooth to="/path#hash">
Link to Hash Fragment
</HashLink>;
scroll: function
const myScrollFn = element => {...}
scrollIntoView
import { HashLink } from 'react-router-hash-link';
...
<HashLink
to="/path#hash"
scroll={(el) => el.scrollIntoView({ behavior: 'auto', block: 'end' })}
>
Link to Hash Fragment
</HashLink>;
#
(empty) or #top
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>
elementId: string
to
prop, if both are present then the elementId
will override the to
prop's hash fragmentto
prop's hash fragment instead of the elementId
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>
);
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:
tabindex
), then the target element is focused.To recreate this react-router-hash-link
does the following:
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.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.