Div anchor tag in a react component

Question

Apologies if this question is flooded in the internet but nothing works in my favor.

I thought all you need to do is add the # + div id at the end of a url which matches the div you are going to.

I want when I got to a particular url, the view port goes to that div. For example:

www.foo.com/bar#5

Takes me to:

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5">
 <!-- You have found me! -->
</div>

I have not much experience with this part of html and wonder if JavaScript is involved?

Back in the days I used to use Dreamweaver and added an anchor tag was just a click of a button so never knew the actual work behind it.

My frontend is React; using Rails 5.

My react layout:

score 0 · Answer 1 · answered Apr 10 '16 at 08:02

0

Normally you are correct but have in mind that if your react application doesn't use server side rendering, all you deliver to your users is a blank page in which react later renders the dom. The problem with this is, that when the browser loads the page initially and searches for an element with the id the document might be empty.

answered Apr 10 '16 at 08:02

Daniel Schmidt

11,605
5
38
70

The old way you could/can use `name="5"` but that still not working. My page is not blank. I have divs with material-like cards. – Sylar Apr 10 '16 at 08:09
do you have server side rendering? – Daniel Schmidt Apr 10 '16 at 08:10
Found the problem: an ID may not start with a digit – Daniel Schmidt Apr 10 '16 at 12:39

Div anchor tag in a react component

1 Answers1

Linked