How to add an ID attribute to the anchor tag that is rendered from react-router link tag?

Question

// modules/App.js <li><Link to="/about" activeStyle={{ color: 'red' }}>About</Link></li> <li><Link to="/repos" activeStyle={{ color: 'red' }}>Repos</Link></li>

when inspecting the DOM using Chrome Developer tools I find that the Link Component renders an tag. So I wan to know how to add an id attribute to the resulting a tag

<a id="foo">

i have tried this but it didn't work :

<li><Link id="foo" to="/about" activeStyle={{ color: 'red' }}>About</Link></li>

Answer 1

From the docs:

You can also pass props you'd like to be on the such as a title, id, className, etc.

http://knowbody.github.io/react-router-docs/api/Link.html

Which version of react-router are you using. Make sure that the id is not rendered, by inspecting the element using a dev console.

Answer 2

It can be directly done by adding and ID attribute to the tha link tag:

<Link id="myId"></Link>

the rendered anchor tag will conatin the ID attribute that was given to link tag.

You can also pass props you'd like to be on the such as a title, id, className, etc.