I am trying to get a menu to work in React that has id links to the specific id div on the homepage, and then other separate pages. If I am on the actual home page, I have the links working as in click scroll down to section on page and highlight link. It will also link to the other pages, but if I want to go back to the homepage to a specific section on said page, it will not go to the div with said id attached to it.
I have used react-scroll
for the scroll down to section on homepage and scrollspy
link highlighting. Also react-router-dom
for the link to the Journal.
This is a basic HTML representation of what my menu should look like, and yes it works on 100% static HTML pages.
<nav id='nav'>
<ul>
<li><a href='/#about'>About</a></li>
<li><a href='/#work'>Work</a></li>
<li><a href='/#experience'>Experience</a></li>
<li><a href='/#skills'>Skills</a></li>
<li><a href='/#education'>Education</a></li>
<li><a href='/journal'>Journal</a></li>
</ul>
</nav>
I feel like I am trying something impossible, that isn't impossible, but appears to be, so far as I can tell impossible in React.
I have tried various packages all with the same result as in doesn't work.