Preact and Parcel - Routing issue after bundling - single-page-application

Question

I've been seeking for a solution to this for over a month now.
I've built a personal landing page using parcel-bundler and preact. I am also using preact-router to handle my routing.
Here's some code.
Main App Component
class App extends Component {
render(props) {
return (
<div id='main'>
{/* Components outside of router persist
throughout all pages */}
<Header />
<Nav tabs={tabs} />
<Router>
<About default path='/about' />
<Skills path='/skills' />
<Books path='/books' />
</Router>
</div>
)
}
}
Nav Component
const Nav = ({ tabs }) =>
<nav>
{tabs.map(t => (
<p>
<Link activeClassName='active' href={ t.path }>{ t.title.toUpperCase() }</Link>
</p>
))}
</nav>
tabs.json
[
{
"title": "About",
"path": "/about"
},
{
"title": "Skills",
"path": "/skills"
},
{
"title": "Books",
"path": "/books"
}
]
So, whenever I run the page live using parcel's server, everything works as expected: I click on a tab, and the respective page/component gets rendered.
However, whenever I run parcel build blah blah, open my index.html and click on any tab, I get the following https://i.imgur.com/71ogrFA.png (screenshot of browser window when I click on a tab), and the URL bar of the browser changes to file:///C:/{route_name}.
I'm trying to understand why it is that my page works when I run it on parcel's live server, and why it doesn't work after build? It seem like, after build, clicking any tabs causes the browser to search for the page in the file system? Is that case? Ultimately, how can I fix this?

Answer 1

A leading slash in URLs makes them absolute to the root.
If the site is transported via HTTP, the root is the domain: <a href="/bar"> placed on a site with the URL http://example.com/foo/bar would point to http://example.com/bar.
However, in case of the file protocol that is used when you open a file from your PC in the browser, the root is the root folder of the current drive, usually C:. So if you opened the same file locally on file:///C:/some/path/foo/bar, the link would point to file:///C:/bar.
Most importantly, this means that this error is only present during local development. It won't occur once your site is hosted on an actual server.
You can run a local HTTP server with tools like XAMPP or MAMP to make sure the links work before deployment.
The parcel development server is also running a local HTTP server, that's why the links work fine there.