Use anchor tag to link to same page using react router hashlocation

Question

Trying to link to the same page with anchor tag but as i am using react router HashLocation as below, router catches it preventing the anchor to work as normal in addition of producing error of "No route matches path".

Router.run(routes, Router.HashLocation, (Root) => { React.render(<Root/>, document.body); });

Same Problem has been asked in the link below with some hint of using "HistoryLocation" but i want to stick with "HashLocation" and those link do not provide concrete answer, thus need help:

1) How to use normal anchor links with react-router 2) Using React-Router to link within a page

I wonder if there are some kind of filter in router to exclude some hash so that i can use default same page anchor linking.

Answer 1

The whole point of using the HashLocation router is to use the # to handle routing, it's a bit of a hack to allow client side navigation, but in fact it's a Single Page Application.

You can't have more than one # in your url, it makes no sense for browsers to have multiple ones. With that in mind, I think you should handle the "in page" navigation (but in fact your whole site is the "in page navigation") yourself, maybe simply using some jQuery (or pure javascript) code to scroll to the specified DOM id maybe on some hook after react-router transition.

Answer 2

Try something like this.

    componentDidUpdate() { if ((this.props.index == this.props.selected)) React.findDOMNode(this).scrollIntoView(); }