Link of 'react-router-dom' not acting as links - reactjs

Question

I have a Link in my Footer.js, and for some reason, it's not working as links in the browser. Like not showing up a pointer on the link etc. I have multiple Links in my Nav component. They all are working fine, but if I place a Link in any other component, it doesn't work. I have tried using BrowserRouter instead of HashRouter and NavLink instead of Link, but the problem still exists. It seems like a reckless mistake, though.
For now, I have this as a static website. That's why I haven't wrapped my components in Switch and Route.
Footer.js
import { Link } from 'react-router-dom'
const Footer = () => {
return (
<div>
<h1>Create group!</h1>
<Link to="/" className="rounded">Get Started</Link>
</div>
)
}
export default Footer
App.js:
import Footer from './Footer'
import { HashRouter } from 'react-router-dom'
const App = () => {
return (
<HashRouter basename="/">
<Nav />
<Home />
<About />
<HowItWorks />
<GroupCarousel />
<EventCarousel />
<Footer />
</HashRouter>
);
}
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Any help would be appreciated.

Answer 1

You have to define your routes inside HashRouter using Switch and Route tags which is to be used inside the app. Otherwise your routes won't work. Try following code and it will work as expected.
Footer.js
import { Link } from 'react-router-dom'
const Footer = () => {
return (
<div>
<h1>Create group!</h1>
<Link to="/" className="rounded">Get Started</Link>
</div>
)
}
export default Footer
App.js
import Footer from './Footer'
import { HashRouter } from 'react-router-dom'
const App = () => {
return (
<HashRouter basename="/">
<Switch>
<Route path="/" exact component={Home} />
</Switch>
</HashRouter>
);
}
export default App;
Home.js
import React from 'react'
...
const Home = () => {
return (
<>
<Nav />
<Home />
<About />
<HowItWorks />
<GroupCarousel />
<EventCarousel />
<Footer />
</>
):
}
export default Home;