Use anchors with react-router

Question

How can I use react-router, and have a link navigate to a particular place on a particular page? (e.g. /home-page#section-three)

Details:

I am using react-router in my React app.

I have a site-wide navbar that needs to link to a particular parts of a page, like /home-page#section-three.

So even if you are on say /blog, clicking this link will still load the home page, with section-three scrolled into view. This is exactly how a standard <a href="/home-page#section-three> would work.

Note: The creators of react-router have not given an explicit answer. They say it is in progress, and in the mean time use other people's answers. I'll do my best to keep this question updated with progress & possible solutions until a dominant one emerges.

Research:

---

How to use normal anchor links with react-router

This question is from 2015 (so 10 years ago in react time). The most upvoted answer says to use HistoryLocation instead of HashLocation. Basically that means store the location in the window history, instead of in the hash fragment.

Bad news is... even using HistoryLocation (what most tutorials and docs say to do in 2016), anchor tags still don't work.

---

https://github.com/ReactTraining/react-router/issues/394

A thread on ReactTraining about how use anchor links with react-router. This is no confirmed answer. Be careful since most proposed answers are out of date (e.g. using the "hash" prop in <Link>)

---

Forepaw

Answer 1

React Router Hash Link worked for me and is easy to install and implement:

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

In your component.js import it as Link:

import { HashLink as Link } from 'react-router-hash-link';

And instead of using an anchor <a>, use <Link> :

<Link to="home-page#section-three">Section three</Link>

Note: I used HashRouter instead of Router:

Twopiece

This is my preferred solution – Sharkey

Works fine for me . Url will looks like localhost:8080/#!/#services – Putter

it also has types for the ones using typescript: npm install @types/react-router-hash-link – Plash

This solution does not work to progamatically push history. – Decal

This finally worked for me. It was not working because I was inserting the ID in a component, instead of a DOM element. – Tsang

For Yarn, of course, it's yarn add react-router-hash-link and then yarn install (or just yarn). – Lumbricoid

Using HashRouter wasn't necessary for me on React 18 and react-router-dom@^6.9.0. Just using HashLink worked as a drop-in replacement for the regular Link (used in just one view so far) so that the anchors worked correctly (1. create a link to my/subview#someAnchor, 2. In that view, have an <article id="someAnchor">..., 3. Click on the link in another view/component and it will browse to the link and scroll to that id as expected. – Refractive

Answer 2

This solution works with react-router v5

import React, { useEffect } from 'react'
import { Route, Switch, useLocation } from 'react-router-dom'

export default function App() {
  const { pathname, hash, key } = useLocation();

  useEffect(() => {
    // if not a hash link, scroll to top
    if (hash === '') {
      window.scrollTo(0, 0);
    }
    // else scroll to id
    else {
      setTimeout(() => {
        const id = hash.replace('#', '');
        const element = document.getElementById(id);
        if (element) {
          element.scrollIntoView();
        }
      }, 0);
    }
  }, [pathname, hash, key]); // do this on route change

  return (
      <Switch>
        <Route exact path="/" component={Home} />
        .
        .
      </Switch>
  )
}

In the component

<Link to="/#home"> Home </Link>

Birck

This works great. I wish this solution was more prominent! – Adrial

tnx @Adrial – Birck

Nice answer. react-router-hash-link didn't work greatly for me. I made an edit to improve the answer: (1) hash is missing as a dependency of useEffect (2) if we depend on location.key, we can guarantee that it will still scroll to the target on <Link /> click. Use case: imagine the user clicks the <Link /> then scroll away, clicking again the same <Link /> won't have any effect if we do not depend on key. – Branks

Ah, and the 0ms timeout works fine for local route change, but from another page, it doesn't give enough time to render the target element. – Branks

I can confirm this works with react-router v6. react-router-hash-link did not work for me. – Province

Thanks for this answer, I'm using react v18 and react-router-dom v6.8 and works as a treat! – Currant

You can use element.scrollIntoView({ behavior: "smooth" }); to smoothly scroll to the element instead of jumping to it – Shankle

Answer 3

Here is one solution I have found (October 2016). It is is cross-browser compatible (tested in Internet Explorer, Firefox, Chrome, mobile Safari, and Safari).

You can provide an onUpdate property to your Router. This is called any time a route updates. This solution uses the onUpdate property to check if there is a DOM element that matches the hash, and then scrolls to it after the route transition is complete.

You must be using browserHistory and not hashHistory.

The answer is by "Rafrax" in Hash links #394.

Add this code to the place where you define <Router>:

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';

const routes = (
  // your routes
);

function hashLinkScroll() {
  const { hash } = window.location;
  if (hash !== '') {
    // Push onto callback queue so it runs after the DOM is updated,
    // this is required when navigating from a different page so that
    // the element is rendered on the page before trying to getElementById.
    setTimeout(() => {
      const id = hash.replace('#', '');
      const element = document.getElementById(id);
      if (element) element.scrollIntoView();
    }, 0);
  }
}

render(
  <Router
    history={browserHistory}
    routes={routes}
    onUpdate={hashLinkScroll}
  />,
  document.getElementById('root')
)

If you are feeling lazy and don't want to copy that code, you can use Anchorate which just defines that function for you. https://github.com/adjohnson916/anchorate

Forepaw

Just want to mention that this solution will not work any longer as for v. 4 of react-router, onUpdate method had been removed. – Planogamete

Just posted a solution for react-router V4, see below. – Sokotra

Answer 4

Here's a simple solution that doesn't require any subscriptions nor third-party packages. It should work with react-router@3 and above and react-router-dom.

Working example: https://fglet.codesandbox.io/

Source (unfortunately, it doesn't currently work within the editor):

---

#ScrollHandler Hook Example

import { useEffect } from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router-dom";

const ScrollHandler = ({ location, children }) => {
  useEffect(
    () => {
      const element = document.getElementById(location.hash.replace("#", ""));

      setTimeout(() => {
        window.scrollTo({
          behavior: element ? "smooth" : "auto",
          top: element ? element.offsetTop : 0
        });
      }, 100);
    }, [location]);
  );

  return children;
};

ScrollHandler.propTypes = {
  children: PropTypes.node.isRequired,
  location: PropTypes.shape({
    hash: PropTypes.string,
  }).isRequired
};

export default withRouter(ScrollHandler);

#ScrollHandler Class Example

import { PureComponent } from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router-dom";

class ScrollHandler extends PureComponent {
  componentDidMount = () => this.handleScroll();

  componentDidUpdate = prevProps => {
    const { location: { pathname, hash } } = this.props;
    if (
      pathname !== prevProps.location.pathname ||
      hash !== prevProps.location.hash
    ) {
      this.handleScroll();
    }
  };

  handleScroll = () => {
    const { location: { hash } } = this.props;
    const element = document.getElementById(hash.replace("#", ""));

    setTimeout(() => {
      window.scrollTo({
        behavior: element ? "smooth" : "auto",
        top: element ? element.offsetTop : 0
      });
    }, 100);
  };

  render = () => this.props.children;
};

ScrollHandler.propTypes = {
  children: PropTypes.node.isRequired,
  location: PropTypes.shape({
    hash: PropTypes.string,
    pathname: PropTypes.string,
  })
};

export default withRouter(ScrollHandler);

Dominicdominica

sweet, thx. Why element.offsetTop instead of window.scrollY + element.getBoundingClientRect().top ? The latter makes it independent from the closest relative parent. – Geologize

In this simple example, calculating element.offsetTop will essentially give you the same result as window.scrollY + element.getBoundingClientRect().top. However, if you're nesting your element within a table, then yes, you'll want to use the later over the former. For example, nested with table: jsfiddle.net/pLuvbyx5, and unnested element: jsfiddle.net/8bwj6yz3 – Dominicdominica

Is there any way to avoid the setTimeOut ? Can we implement the same without using setTimeOut ? #64225047 – Terracotta

Unfortunately, no. Some browsers (like Safari) won't update the scroll position without the delay. – Dominicdominica

@MattCarlotta let suppose my page takes more than 100ms to render will it work in that case? if yes then, please inform us a bit about it. can you please address this #64225047 – Terracotta

Answer 5

Just avoid using react-router for local scrolling:

document.getElementById('myElementSomewhere').scrollIntoView() 

Slingshot

Ideally the local scrolling goes through the router because then you can externally link to that specific part of the document, but this answer's still great thanks, because it has told me what code I need to put in my this.props.history.listen callback. – Delainedelainey

In my case I just wanted to scroll down to a div by imitating the same as a link with href as #myElementId... this indeed was the best and simple answer, thank you! – Nanceynanchang

Answer 6

The problem with Don P's answer is sometimes the element with the id is still been rendered or loaded if that section depends on some async action. The following function will try to find the element by id and navigate to it and retry every 100 ms until it reaches a maximum of 50 retries:

scrollToLocation = () => {
  const { hash } = window.location;
  if (hash !== '') {
    let retries = 0;
    const id = hash.replace('#', '');
    const scroll = () => {
      retries += 0;
      if (retries > 50) return;
      const element = document.getElementById(id);
      if (element) {
        setTimeout(() => element.scrollIntoView(), 0);
      } else {
        setTimeout(scroll, 100);
      }
    };
    scroll();
  }
}

Webworm

the upper limit is 5 seconds. will it work if the page loads after 5 seconds? – Terracotta

Of all the SO solutions to this problem, this has to be the easiest by far. Use with <Link to={{ pathname: "/", hash: "elementIDtoScrollTo"}}> – Chevrotain

@AugustKimo What's the difference? – Embree

@AmitKumar You can change retries to a higher value. 5 seconds is a bit too little in my opinion. – Embree

Answer 7

I adapted Don P's solution (see above) to react-router 4 (Jan 2019) because there is no onUpdate prop on <Router> any more.

import React from 'react';
import * as ReactDOM from 'react-dom';
import { Router, Route } from 'react-router';
import { createBrowserHistory } from 'history';

const browserHistory = createBrowserHistory();

browserHistory.listen(location => {
    const { hash } = location;
    if (hash !== '') {
        // Push onto callback queue so it runs after the DOM is updated,
        // this is required when navigating from a different page so that
        // the element is rendered on the page before trying to getElementById.
        setTimeout(
            () => {
                const id = hash.replace('#', '');
                const element = document.getElementById(id);
                if (element) {
                    element.scrollIntoView();
                }
            },
            0
        );
    }
});

ReactDOM.render(
  <Router history={browserHistory}>
      // insert your routes here...
  />,
  document.getElementById('root')
)

Sokotra

Is this still up to date? The history attribute does not exist for me. – Abigael

Answer 8

<Link to='/homepage#faq-1'>Question 1</Link>

useEffect(() => {
    const hash = props.history.location.hash
    if (hash && document.getElementById(hash.substr(1))) {
        // Check if there is a hash and if an element with that id exists
        document.getElementById(hash.substr(1)).scrollIntoView({behavior: "smooth"})
    }
}, [props.history.location.hash]) // Fires when component mounts and every time hash changes

Debra

Answer 9

Create A scrollHandle component

    import { useEffect } from "react";
    import { useLocation } from "react-router-dom";

    export const ScrollHandler = ({ children}) => {

        const { pathname, hash } = useLocation()

        const handleScroll = () => {

            const element = document.getElementById(hash.replace("#", ""));

            setTimeout(() => {
                window.scrollTo({
                    behavior: element ? "smooth" : "auto",
                    top: element ? element.offsetTop : 0
                });
            }, 100);
        };

        useEffect(() => {
            handleScroll()
        }, [pathname, hash])

        return children
    }

Import ScrollHandler component directly into your app.js file or you can create a higher order component withScrollHandler and export your app as withScrollHandler(App)

And in links <Link to='/page#section'>Section</Link> or <Link to='#section'>Section</Link>

And add id="section" in your section component

Lazes

Answer 10

An alternative: react-scrollchor https://www.npmjs.com/package/react-scrollchor

react-scrollchor: A React component for scroll to #hash links with smooth animations. Scrollchor is a mix of Scroll and Anchor

Note: It doesn't use react-router

Poppied

Answer 11

For simple in-page navigation you could add something like this, though it doesn't handle initializing the page -

// handle back/fwd buttons
function hashHandler() {
  const id = window.location.hash.slice(1) // remove leading '#'
  const el = document.getElementById(id)
  if (el) {
    el.scrollIntoView()
  }
}
window.addEventListener('hashchange', hashHandler, false)

Towill

This code actually worked for me for initial page loading in a React application when I called it after my API call to get the page content. I like the simplicity of it and same page links already worked for me. – Jerold

Answer 12

I know it's old but in my latest [email protected], this simple attribute reloadDocument is working:

div>
 <Link to="#result" reloadDocument>GO TO ⬇  (Navigate to Same Page) </Link>
</div>
<div id='result'>CLICK 'GO TO' ABOVE TO REACH HERE</div>

Carbonate

I just want to mention that this really helped me out. I also used it in combination with stackoverflow.com/a/51588820 to achieve smooth scrolling as well. Read about reloadDocument in the React Router V6 docs: reactrouter.com/en/main/components/link#link – Divertimento

I couldn't test this as my version is 5, and we're not upgrading yet. So I'm curious: doesn't this reload the entire page (and thus the React app) if the path is different from the current path? If it does, then wouldn't that mean we're losing the benefits of the router which changes the content shown in the React app without reloading the entire app? – Lumbricoid

Answer 13

Hook based version with react router v6

import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

export function useScrollToAnchor() {
  const { pathname, hash, key } = useLocation()

  useEffect(() => {
    if (hash === '') window.scrollTo(0, 0)
    else {
      setTimeout(() => {
        const id = hash.replace('#', '')
        const element = document.getElementById(id)
        if (element) {
          element.scrollIntoView({
            block: 'start',
            inline: 'nearest',
            behavior: 'smooth',
          })
        }
      }, 0)
    }
  }, [pathname, hash, key])
}

Need an offset because of a fixed position header?

<div id="your-anchor" style={{ scrollMarginTop: 52 }}> // Use header height here
  ...
</div>

Noreen