Anchor links working locally but not when deployed (React) - html

Question

I have a one page react app and I have a menu with anchor links set up like this:
Story
And in the target div, I have it like this:
<div id="story" class="py-16 xl:py-36 px-4 sm:px-6 lg:px-8 bg-black overflow-hidden">
When I do npm start to run the page locally, the anchor links work as intended. When I deploy it to the web, the links give me a 404.
Why would this happen?
EDIT:
I read about react-router-dom and tried to implement it, but I am getting strange behavior.
I imported this at the top of App.js:
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
I wrapped the enter contents of the first App() function in <Router></Router>.
Then inside the App() section, I set up this:
<Switch>
<Route path="/about">
<About />
</Route>
</Switch>
My About link is set up like this:
<a href="/about" class="text-base text-gray-300 hover:text-white">
About
</a>
Then at the very bottom of the App.js document, below the , I have this:
function About() {
return (
<><h2>About</h2>
<br />
<p>Test</p></>
);
}
But what happens when I click the About link is it re-renders the entire main page and the text "About Test" at the bottom.
What do I need to do to get this to render as an entirely new page?

Answer 1

As far as I am aware you can not use <a> tags for internal navigation in react. I don't know why it works locally for you.
With react you are creating single page applications (SPAs), you have 1 html page that can be found in the public folder. If you created the app using create-react-app, you will see within it, an element such <div id=root> </div>. That is the targetted rendering location, where you will be rendering the entire app by dynamically changing the html within it as you interact with the page.
However, when you typically click on an <a> tag, we are usually taken to different html page. Here I would assume the server is trying to retrieve either the App.html page or index.html page from within public/App folder.
React does not typically come in with built in routing functions/components. It leaves it up to the user to implement. So user's usually turn to a package like react-router along with react-router-dom/native (depending on react or react native) to get those functionalities.
Answer to Updated Question
Change your <a> tags to <Links> as follows
<Link to='/about' className='tailwind_classes'>About</Link>
<Link> tags are meant to replace <a> tags if using react-router-dom for navigation.
When you click on it, your <Router> is notified and lets the <Switch> figure out which <Route> to render
Update
Okay let's say you have a header where your links are, and we have 2 components <Home> and <About>
Then this is how your <App> should look like
return(
<Router>
{/* The header can be it's own component*/}
<header>
<Link to='/home' className='tailwind_classes'>Home</Link>
<Link to='/about' className='tailwind_classes'>About</Link>
</header>
<Switch>
{/* exact makes sure path has to be exactly '/' */}
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
</Switch>
<Router>
)
You could obviously write the markup for the <Home> & <About> component directly inside the <Route>s but would not advise. The header can also be it's own component and it will always stay on the screen since it is outside the switch, making it kind of a global thing.
The to prop of Link must match the path prop of one of the Route
Basically when you click on a link, the url changes. The Router is notified who then passes the new url to the Switch, which then acts like a switch case statement to match the url and renders/mounts the JSX inside the matched Route after removing/unmounting what was previously there.
Read the read the react-router-dom documentation for further clarification