2

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

2 Answers 2

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.

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

Comments

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

2 Comments

Is it supported using createBrowserHistory instead of createHashHistory ?
No, there is now way to get this working with the hash. You could hack together something using the querystring.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.