CODEWITHSUNDEEP
reactjsreact-routerreact-bootstrap
Matthew Herbst
Matthew Herbst

Reputation: 32013

Anchoring Tabs with React Router

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".

Upvotes: 2

Views: 3332

Answers (2)

Scarysize
Scarysize

Reputation: 4291

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.

Upvotes: 2

Kyeotic
Kyeotic

Reputation: 19857

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).

Upvotes: 1

Related Questions