Good afternoon free code camp! I’ll get right to the point.
I have an app that dynamically renders a div based off of what is in the array. I am having trouble with one part though. I want to make the entire div a hyperlink so you can click on it and go to its corresponding page.
This is just HTML: if you want a url link, you have to use a link element, you can’t get around this and you can’t put href attributes on arbitrary elements.
Re it not working, it would be helpful if you could explain what you’re trying to do: if it’s an external link, it would open an external link in the browser, it’s just HTML. If it’s an internal link to an element with a matching ID, it won’t do anything if there isn’t a matching ID
You’re conflating two things here. You’re using an internal routing system designed to load in React components on the same page but make the browser think you are navigating to a different url. But you’re trying to make it work like a single HTML page.
if you want to use react router here, use react router. It provides a wrapper around <a> components called <Link> that would give you what you want: <Link to="/path/defined/in/routes" >.
if you literally want to scroll to a component, like href="#my-component" on an anchor, you have to have it all rendered on the page: as I said, it’s just HTML. You don’t use the router here, that’s not what it’s for.
<a href="#example">Scroll to example</a>
....further down page