How to get proper HTML routing?

So here’s my predicament:

I’ve been experimenting with multi-page basic HTML/CSS/JS websites but here’s what I’m trying to solve.

When you link a basic about.html to the navbar here’s the address result (using live server on local machine)

How can I make that url be /about without the .html and without frameworks (but If I need a framework that’s fine as well but please suggest react stuff if possible)

Libraries are welcome!


I googled your question and came up with a bunch of answers like this one.

I would search through google answers and that will probably give you the answer you need.

I mean you can build your own router and dynamically update the DOM content as well, but that seems a little extreme just to get rid of a file extension.

Technically, it should work without the extension. Not sure how servers actually might handle it but with Live server and localhost it does work for me.

<a href="./about">About</a>

If you want a router for React then react router is the one used the most.

Actually for me it get’s this:

@lasjorg When I put in your exact code it does not work and return the image you see above. I also tried @jwilkins.oboe’s post and did not work either but thanks to both of you for trying! :+1:

It works for me. I’m using the fork of the Live Server extension (Five Server), but I also tested it with http-server and it works as well. Are you sure you have the path and file location correct?

As I said, you can also implement your own router (example) or look for a library. But I wouldn’t suggest doing so, at least not just to get rid of the file extension in the address bar, if that really is the only reason.

I’m using the VS Code Live Server extension but pherhaps when I push the project to netlify it will clear up

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.