CODEWITHSUNDEEP
node.jsreactjsreact-router
Nym
Nym

Reputation: 31

link to anchor from URL using react

I have a FAQ page i have created with many questions and answers in the form of 

<div>
    <h4 id="anchor-name">question</h4>
    <p>answer</p>
</div>

This works as expected if i have a button or clickable link in the form of

<a href="#anchor-name">Click here to go to anchor</a>

which takes me directly to my question with that id (expected behaviour) The problem is when i try to access this from a URL from another tab by doing something like

https://my-app-url/#/FAQ/#anchor-name

it redirects me to my FAQ page but not to my question. Instead, it just loads the FAQ and stays on the top.

Some context:

<div>
    <a href="#anchor-name">
      <h4 id="anchor-name">question</h4>
      <p>answer</p>
    </a>
</div>

What i wish to know and cannot seem to find it by doing research a lot is:

  1. Is it possible to access this anchor via URL from an external link by using react-router library?
  2. Could it be that by using react the html way to anchor is not working as expected?
  3. Is my first # in the URL interfering with the anchor linking feature?

Upvotes: 1

Views: 526

Answers (2)

Nym
Nym

Reputation: 31

For anyone who might be interested, I fixed this issue. The problem was fixed by replacing HashHistory with BrowserHistory. With HashHistory, the URL gets an # that interferes with anchors. By using BrowserHistory, that # is never there so the issue is gone. Hopes this helps.

Upvotes: 0

aviya.developer
aviya.developer

Reputation: 3613

You don't need that last / right before the #anchor-tag.

so the URL would be:

https://my-app-url/#/FAQ#anchor-name

Upvotes: 1

Related Questions