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.