I have to type "/index.html" in the url for the website to work but once I visit a new link it stops working

Support
, ,
1

For some reason, I need to type /index.html in the website URL, which is the case with Netlify CLI and GitHub Pages. However, when I press a new link in my navigation bar (e.g., home.html), Netlify CLI and GitHub Pages still work, whereas Netlify returns to https://candid-sprite-a580ab.netlify.app/.

My _redirects file looks like this:
/* /index.html 200
/home /home.html 200
/stamps /stamps.html 200
(and it is in the root directory, same as index.html)

This is my Netlify website without the “/index.html” (which shows up incorrectly. There should be a globe):
https://candid-sprite-a580ab.netlify.app/
With the “/index.html” (which shows up correctly):
https://candid-sprite-a580ab.netlify.app/index.html

This is the GitHub directory I used to deploy (please ignore the commit messages. I am fairly new to using Git, and I got tired):

More contexts:

  • The deploy summary states:
    3 redirect rules processed
    All redirect rules deployed without errors.

  • All stages are completed in the logs.

  • I added a console log in my main.js: console.log(“Current path:”, window.location.pathname); which prints out: “Current path: /” with Netlify’s URL

  • My Base directory is “/”

  • My Build Settings:

    Screenshot 2024-12-19 at 12.40.45 PM
    Screenshot 2024-12-19 at 12.40.45 PM1194×1056 55.5 KB

  • Pretty URLs are enabled.

I would appreciate it if someone could help me debug this. By the way, this is my first time using Netlify. I can provide more information about my issue if needed.

2

@mynavu You should just delete your _redirects file.

The rules you have in there likely aren’t doing whatever you believe they are.

Once you’ve deleted it and rebuilt, then raise here whatever your remaining issues are.

3

Hi @nathanmartin, thanks for the response. My main issue is that my web app only works when “/index.html” is added to the end of the URL. If the _redirects file isn’t working then I don’t know any other way to fix the issue other than adding:
if (!window.location.pathname.endsWith(‘.html’)) {
if (window.location.pathname === ‘/’) {
window.location.pathname = ‘/index.html’;
} else if (window.location.pathname === ‘/home’) {
window.location.pathname = ‘/home.html’;
} else if (window.location.pathname === ‘/stamps’) {
window.location.pathname = ‘/stamps.html’;
} else {
window.location.pathname = ‘/index.html’;
}
}
to my main.js file which would be bad practice. Can you point me in the right direction? Thanks for the support.

4

Why is this, is it just due to how you’ve coded it?

E.g. You have code that expects a page to be loaded by /home.html instead of just /home ?

5

That is my current issue. I linked my Github repository that showed my navigation bar that links to different pages on the web apps are “href=“index.html”, href=“home.html”, etc…” which confused me as to why Netlify would omit the “.html” in the URL. Navigating the home page worked on GitHub Pages and Netlify CLI’s server.

6

@mynavu I saw your GitHub, but I try not to spend time swimming in other people’s code if I can avoid it.

Now that I better understand the situation, this is what I currently see…

Without .html:

screenshot-20241219-185543
screenshot-20241219-1855431712×985 236 KB

With .html:

screenshot-20241219-185554
screenshot-20241219-1855541713×1095 309 KB

Which of course, is due to your code like this:

Since having clean URL’s that don’t contain file extensions in the URL is preferable for most people, instead of trying to force them, I’d personally adjust the application so it doesn’t require them.

I’d change all the links from things like /stamps.html to /stamps
I’d adjust the conditionals to check for values like /stamps

If you do want to try and force .html extensions, you’re likely to need to use Edge Functions as per:

1 Like
7

That seems to be doing the trick. Thanks a lot!