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
// In YourComponent.js
...
import { HashLink as Link } 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):
<Link to="/some/path#with-hash-fragment">Link to Hash Fragment</Link>
// In YourComponent.js
...
import { NavHashLink as NavLink } from 'react-router-hash-link';
...
// Use it just like a RRv4/5 <NavLink> (see RRv4/5 api for details):
<NavLink
to="/some/path#with-hash-fragment"
activeClassName="selected"
// etc...
>Link to Hash Fragment</NavLink>
- Smooth scroll to the element
- React Router Hash Link uses the native Element method
element.scrollIntoView()
for scrolling, and when thesmooth
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 sosmooth
will work in all browsers
import { HashLink as Link } from 'react-router-hash-link';
<Link smooth to="/path#hash">Link to Hash Fragment</Link>
- 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>
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>
);