Anchoring Tabs with React Router

Question

How do I use react-router to create a link with an anchor for one of my pages?

Example: I want something like: mysite.com/#/nodes/10#instances

This would direct someone to the route handled by /nodes/:id and then select the tab (react-boostrap tabs) on that page that corresponds with "instances".

Scarysize · Accepted Answer · 2015-12-02 20:22:39Z

2

You could implement a listener for hash changes. This is a native javascript event window.onhashchange (for more see this hash change event MDN)

You could have a top level component containing all the tabs as sub components and just render the specific tab based on the hash value of the url. If the hash changes, you can update state/props to re-render and display the new tab.

answered Dec 2, 2015 at 20:22

Scarysize

4,31129 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kyeotic · Accepted Answer · 2015-12-02 19:28:31Z

1

Normally you would use a <Link /> component, but you can't use a double hash for the specific link you want. Event with history routing (which doesn't use a hash for the URL) this is not supported in react-router (see the last paragraph).

answered Dec 2, 2015 at 19:28

Kyeotic

19.9k12 gold badges73 silver badges133 bronze badges

2 Comments

Matthew Herbst Over a year ago

Is it supported using createBrowserHistory instead of createHashHistory ?

Kyeotic Over a year ago

No, there is now way to get this working with the hash. You could hack together something using the querystring.

Collectives™ on Stack Overflow

Anchoring Tabs with React Router

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related