Source:  Twitter logo

// 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>

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.

1 users liked answer #0dislike answer #01
Philipp Alexander Frank profile pic
Philipp Alexander Frank

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.

0 users liked answer #1dislike answer #10
Chetan Kumar profile pic
Chetan Kumar

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).