How to use normal anchor links with react-router

Question

Very similar to this angular question: how do I use anchor links for in-page navigation when using react-router?

In other words, how do I implement the following plain HTML when using react-router?

<a href="#faq-1">Question 1</a>
<a href="#faq-2">Question 2</a>
<a href="#faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="fa1-3">Question 3</h3>

Currently I intercept clicks on such links, and scroll to the anchor position. This isn't satisfactory, because it means it's impossible to link directly to some section of a page.

Someone edited this question into a totally different quesiton. This is about [anchor links](https://www.google.com/search?q=anchor+links). — starwed, Mar 08 '15 at 18:08
I would love to know the answer to this as well. They've said they "don't support this," which seems ridiculous when the product is a router. — Mike, Apr 09 '15 at 19:00
@Mike - I'd be interested to hear your comment on my answer as I believe that should resolve the issue if you try it? — Colin Ramsay, Apr 10 '15 at 10:02
Your answer may be in this thread: [https://github.com/rackt/react-router/issues/770](https://github.com/rackt/react-router/issues/770) — Mike, Apr 10 '15 at 12:35
I ran into the same problem and solved it by intercepting the onClick of the anchor and using a scrollTo solution in place of the default browser behavior of the anchor tags. I agree with @Mike that this is rather ridiculous. — Katie Kilian, Apr 10 '15 at 15:46
@CharlieKilian That's what I do currently, but it doesn't allow for proper linking... — starwed, Apr 10 '15 at 23:06
@starwed I think what you're currently doing is the best approach with React, it's just not very typical to link like this - you probably want to take this to GH. https://github.com/rackt/react-router/issues/394 — Benjamin Gruenbaum, Apr 10 '15 at 23:14

score 19 · Answer 1 · answered Apr 05 '15 at 11:03

19

The problem with anchor links is that react-router's default is to use the hash in the URL to maintain state. Fortunately, you can swap out the default behaviour for something else, as per the Location documentation. In your case you'd probably want to try out "clean URLs" using the HistoryLocation object, which means react-router won't use the URL hash. Try it out like this:

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});

answered Apr 05 '15 at 11:03

Colin Ramsay

16,086
9
52
57

7

This is how my router was initially set up (using _Router.HistoryLocation_), but it doesn't automatically intercept __ links in either JSX files or content inserted with _dangerouslySetInnerHTML_. They've said on their Github issues page they don't support it and don't suggest binding events to handle it such as _$('a').click(func)_ which leaves me to question how exactly one is supposed to do it. – Mike Apr 10 '15 at 12:30
I think my need is different from the poster's initial question now that I think about it. – Mike Apr 10 '15 at 12:35
I get what you mean now though. I've never actually had this requirement so I just assumed it'd work but based on what you're saying it sounds like an extra workaround is needed, but that the HistoryLocation approach would provide a starting point. – Colin Ramsay Apr 10 '15 at 12:43
2

There's a closed bug for React-Router around using HistoryLocation to enable Hash Links: https://github.com/rackt/react-router/issues/394. After it was closed others have posted it is still an issue, I find this to be true. – Steve O Jul 14 '15 at 13:40
5

Sorry it's not clear from the answer or the comments - will this answer make an `` tag correctly navigate to a section with a matching ID? – Don P Sep 24 '16 at 07:27
@Mike I think this use case is covered in [How to use React links when rendering content with dangerouslySetInnerHtml?](https://stackoverflow.com/q/51569981/1804173) – bluenote10 Jan 20 '21 at 08:32
@bluenote10 Thank you, but 5 years later almost everything has changed so I don't think my comment really applies anymore. – Mike Feb 05 '21 at 16:17

score 14 · Answer 2 · answered Aug 19 '17 at 23:43

React Router Hash Link worked for me. 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="#faq-1>Question 1</Link>
<Link to="#faq-2>Question 2</Link>
<Link to="#faq-3>Question 3</Link>

NOTE: I used HashRouter instead of Router

Noa · Answer 3 · 2021-02-17T16:31:47.247

import { Link } from 'react-router-dom'

Link using

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

Then insert the following code inside your target React component (Homepage):

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

score 5 · Answer 4 · answered Mar 29 '21 at 20:15

Using current methods you would use Link from react-router-dom

<a href="#faq-1">Question 1</a>

would be accomplished with

import React from 'react';
import {Link} from 'react-router-dom';

and using

<Link to={{pathname: '/this-view-path', hash: '#faq-1'}}>Question 1</Link>

of course '/this-view-path' could be provided as a variable from your project

score 0 · Answer 5 · answered Sep 06 '22 at 15:19

For Router 6 use can use the following:

const {hash, key} = useLocation()
useEffect(()=>{
    if(hash){
       const targetElement = document.getElementById(hash.substring(1))
        targetElement?.scrollIntoView({behavior: 'smooth'})
    }
}, [key, hash])

How to use normal anchor links with react-router

5 Answers5

Linked