Hash links

[CezaryDanielNowak]

Hey,
I'd like to write something like this:

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

It should open home route and scroll to <section id="about"></section>

Will it be possible ?

Regards, Cezary Daniel Nowak

[mjackson]

Hmm, good question.

We should definitely support this for people who are using <Routes location="history">, which I assume you are. I think we probably need to add a <Link hash> prop.

@rpflorence thoughts?

At first glance, it doesn't seem like using <Routes location="hash"> will work because it already uses window.location.hash to manage the actual path. But we might be able to hack around it using a double hash, like #/home#about. I think we're already doing this for query strings with hash location.

[ryanflorence]

Yeah, I've always wanted this. Its part of the reason our history fallback does page reloads, so that urls are consistent and you can still use anchor links as they are designed.

I don't want to try to support this in HashLocation: we'd have to get involved with finding elements by ID or name and scrolling to them, etc. Additionally, those URLs are super weird looking.

But for HistoryLocation it should be as simple as stripping off the #hash-stuff before matching the route and then putting it back on when we use the history api.

[BerkeleyTrue]

@rpflorence Is anyone working on this? I would be down to form a PR if not.

[ryanflorence]

Seems like this should already work if you've got HistoryLocation. You can link to URLs with <Link to="/foo/bar#baz"/>. Anything starting with a slash will just get passed through as the path you want. If it doesn't work, a failing test case would be fantastic :)

[scabbiaza]

Yes, it works when you write in the to attribute URL as a string.
But how to add hash if you are using route name?

Works:

<Route name="about-page" path="/about" handler={About}/>
<Link to="/about#hash"></Link>

Doesn't work:

<Route name="about-page" path="/about" handler={About}/>
<Link to="about-page#hash"></Link>

Error:

Uncaught Error: Invariant Violation: Unable to find <Route name="about-page#hash">

[schickling]

Even with a starting slash it doesn't work for me. Reopen please.

[lostpebble]

Yep, doesn't work for me either. Both ways. Shows up in the address bar as it should but never goes to the location on the page.

[juampynr]

Does not work for me either.

[whatupdave]

Yeh, this should be reopened. I'm using params to generate a more complex URL and need to add the hash.

[clementdubois]

Does not work for me either. This should be reopened please

[iyn]

+1, I'm also interested in a solution.

[nickpresta]

As a workaround, in my main "app", I've added the following to componentDidMount:

componentDidMount() {
  // Decode entities in the URL
  // Sometimes a URL like #/foo#bar will be encoded as #/foo%23bar
  window.location.hash = window.decodeURIComponent(window.location.hash);
  const scrollToAnchor = () => {
    const hashParts = window.location.hash.split('#');
    if (hashParts.length > 2) {
      const hash = hashParts.slice(-1)[0];
      document.querySelector(`#${hash}`).scrollIntoView();
    }
  };
  scrollToAnchor();
  window.onhashchange = scrollToAnchor;
}

This allows you to link to things with URLs like: /#foo#bar which will scroll to elements which have an id attribute of bar.

[mouhsinelonly]

+1

[Mythli]

Not working with Router.HistoryLocation. It just follows the link and does nothing.

[Pouja]

@nickpresta solution did not work for me, but I could not figure out why. When you are switching from states it will not scroll, but if you refresh the page it will scroll to the element.

But I fix it by overriding the scrollBehavior with your solution.
So the config looks like this:

var router = Router.create({
    routes: routes,
    location: Router.HashLocation,
    scrollBehavior: {
        /**
         * Sets the behaviour for scrolling when changing state.
         * If there is a second hash in the url, scroll to the element with matching identifier.
         * Otherwise scroll to the top.
         * @override
         */
        updateScrollPosition: function updateScrollPosition() {
            window.location.hash = window.decodeURIComponent(window.location.hash);
            const hashParts = window.location.hash.split('#');
            if (hashParts.length > 2) {
                const hash = hashParts.slice(-1)[0];
                const element = document.querySelector(`#${hash}`);
                if (element) {
                    element.scrollIntoView();
                }
            } else {
                window.scrollTo(0, 0);
            }
        }
    }
});

[alansouzati]

thanks @Pouja, your solution helped me to solve the issue I was facing. But I'm using HistoryLocation and for me I had to do the following:

var router = Router.create({
    routes: routes,
    location: Router.HistoryLocation,
    scrollBehavior: {
        updateScrollPosition: function updateScrollPosition() {
          var hash = window.location.hash;
          if (hash) {
            var element = document.querySelector(hash);
            if (element) {
              element.scrollIntoView();
            }
          } else {
           window.scrollTo(0, 0);
          }
        }
    }
});

[davis]

does this work in 1.0.0?
how can i configure this in jsx?

i have something like this:

React.render((
  <Router onUpdate={() => window.scrollTo(0, 0)} scrollBehavior={{
    /**
     * Sets the behaviour for scrolling when changing state.
     * If there is a second hash in the url, scroll to the element with matching identifier.
     * Otherwise scroll to the top.
     * @override
     */
     updateScrollPosition: function updateScrollPosition() {
      console.log('hi')
      window.location.hash = window.decodeURIComponent(window.location.hash);
      const hashParts = window.location.hash.split('#');
      if (hashParts.length > 2) {
        const hash = hashParts.slice(-1)[0];
        const element = document.querySelector(`#${hash}`);
        if (element) {
          element.scrollIntoView();
        }
      } else {
        window.scrollTo(0, 0);
      }
    }
  }}>
    <Route path="/" component={App}>
      <IndexRoute component={LandingContent}/>

and updateScrollPosition isn't being called

[knowbody]

@davis in 1.0 there is nothing like scrollBehavior, you need to handle it yourself for now. we are working on it

[davis]

got it, thanks!

[alansouzati]

@scabbiaza not sure if you were able to fix your issue, but if you want to use the route name you can invoke the makeHref function from react router like this:

var Component = React.createClass({

  contextTypes: {
    router: React.PropTypes.func.isRequired
  },

  render: function() {

    var aboutPathHref = this.context.router.makeHref('about-page');

    return (
      <Link to={aboutPathHref + '#hash'} />
    )
  }
});

[dopeboy]

@alansouzati, your solution worked great. Thank you.

[taion]

1.0.0-rc3 actually has a hash prop on Link. You should use that.

[davis]

@taion how do you use it?

[taion]

You pass the hash to it.

[davis]

nvm, it's still not working in 1.0.0-rc3 (#2216)

[alansouzati]

That's great to hear that react-router 1.0.0 supports that. But I believe some folks will need some time to migrate to react 0.14. In the meantime this work around will help people to get going.

[sanakr]

how to use <a href="mailto:[email protected]"/> in Link in react-router

[timdorr]

@sanakr Just use a normal <a> element. Don't use Link.

[sanakr]

@timdorr i got solution, its possible in Link .

<Link to={{pathname:mailto:${value}}} className={style.qLink} target="_blank">{value}</Link> just like this.

[timdorr]

You shouldn't do that. Just use a normal <a> element.

<a href=`mailto:${value}` className={style.qLink} target="_blank">{value}</a>

Our <Link> component isn't designed to take in URLs with different protocols and you are taking a performance hit that you don't need to be taking by adding the overhead of that component.

[Gijsjan]

About hash links, I've had success with using a route param and the ref's callback. (so not really a hash link, but the same functionality)

{
  items.map((item) =>
    <li
      ref={(el) => {
        if (el != null && item.id === this.props.routeParams.id) {
          el.scrollIntoView();
        }
      }
    >
  )
}

[amadeogallardo]

Is there any supported way to prevent re-rendering while using named anchors to sections on the same page? This causes an unnecessary overhead.

[kelchm]

Is there any supported way to prevent re-rendering while using named anchors to sections on the same page? This causes an unnecessary overhead.

@Agalla81, have you tried using Link with the full URI rather than just an anchor with a hash href?

[ligaz]

@Agalla81 I'm successfully using the following workaround: override shouldComponentUpdate in the route's component and return false when you detect hash navigation.

Note: If your component is pure this should come out of the box.

[jk05]

I was wondering if there is now an accepted way to getting anchor links working with react-router? I have attempted many of the methods outlined and failed so had to revert to regular named anchors using id's. I couldn't find much on the internet about this. Would love to know more. Thanks.
@ligaz Would you happen to have an example that you could show me where you used this shouldComponentUpdate workaround? Thank you.

[kopax]

I have tried @RAFREX solution and it appear it work but the view get rerendered while it should not, is there a way to prevent this ?

[abumalick]

A simple solution with https://www.npmjs.com/package/scroll-to-element that a friend found.

import { browserHistory, Link } from 'react-router';
import scrollToElement from 'scroll-to-element';
componentDidMount() {
    this.jumpToHash();
  }
  componentDidUpdate() {
    this.jumpToHash();
  }
  jumpToHash = () => {
    const hash = browserHistory.getCurrentLocation().hash;
    if (hash) {
      scrollToElement(hash, { offset: -120 });
    }
  }

After that you add some div with an corresponding id on the page

[gajus]

I did not like the @RAFREX proposal because it requires to use custom Link component. Here is a simple solution that achieves the same result but without requiring to override the Link component:

https://medium.com/@gajus/making-the-anchor-links-work-in-spa-applications-618ba2c6954a

[huy-nguyen]

Just to add to @abumalick's solution, the history object (which he/she imports as browserHistory from react-router-dom) is also available as this.props.history on the Route component. In that case, the hash is available via this.props.history.hash.

[abumalick]

Yes, my solution is for react-router 3. With react-router 4 you should take history from props

[G2Jose]

@RAFREX's solution (#394 (comment)) worked really well, but I didn't want to make such a top level change on a production website just in case there are regressions.

I only had one place where I needed this logic, so I used a ref instead that uses similar logic -

 <a
	href="#questionid"
	id="questionid"
	ref={element => {
		const { hash } = window.location;
		if (hash !== '') {
			const id = hash.replace('#', '');
			if (element.id === id) element.scrollIntoView();
		}
	}}
>
	Text
</a>

[lemmingapex]

Although it was not ideal, this worked out of the box for me with both HashRouter and BrowserRouter: https://github.com/rafrex/react-router-hash-link

import { HashLink } from "react-router-hash-link";

<HashLink to="/my-cool-page#my-cool-section">Goto Cool Section</HashLink>

<div id="my-cool-section">The coolest</div>