Local page links (<a href='#' />) aren't working with HashRouter - html

Question

I wanted to add multiple pages to my React website so I started using the HashRouter import from react-router-dom. Since then only my main page loads and I am no longer able to use local links in the page. I can't redirect the user to specific areas on the main page which i used to be able to do before I started using the Router import. This website also uses github pages if that affects anything.
I am currently using the <a> tags like this:
<a className="nav-link" href="/#about-me">
About Me
</a>
with the URL appearing as this with no content below it
http://localhost:3000/#about-me
I have also tried using the <Link> tag but it just ends up reloading the page.
<Link className="nav-link" to="/#about-me">
About Me
</Link>
With this URL appearing instead:
http://localhost:3000/#/#about-me
How do I get my page to scroll down to the id rather than reload or load a blank page?
Main code snippets for reference:
Home.js snippet
const Home = () => {
return (
<div className='main'>
<section className='section-welcome'>
<Introduction />
</section>
<section id='about-me' className='section-about-me'>
<AboutMe />
</section>
</div>
);
};
export default Home;
Main.js
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './Pages/Home.js';
import NoPage from './Pages/NoPage.js';
const Main = () => {
return (
<Routes>
<Route path='/' element={<Home />}></Route>
<Route path="*" element={<NoPage />} />
</Routes>
);
}
export default Main;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router>
<App /> {/* The various pages will be displayed by the `Main` component. */}
</Router>
</React.StrictMode>
);

Answer 1

The problem is with how the code runs with GitHub pages, not the references.
Currently, whenever a link is clicked in the NavBar the website tries to load the URL as root/{href from <a> tag}. This conflicts with GitHub pages as it searches links under the githubname.github.io/project-name/ and the program is trying to display githubname.github.io/#.
In order to fix this, you need to add a basename in the <Router> tag which forces the page to load at /project-name/#.
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router basename={process.env.PUBLIC_URL}>
<App /> {/* The various pages will be displayed by the `Main` component. */}
</Router>
</React.StrictMode>
);
Relevant Links for more info
https://maximorlov.com/deploying-to-github-pages-dont-forget-to-fix-your-links/
https://create-react-app.dev/docs/deployment/#building-for-relative-paths