Navigation not working after refreshing page on Netlify

[rgilton]

I'm having trouble deploying a vitepress-based site to Netlify. If I enter the site through its root page then all the navigation works fine, but if I navigate to a non-root page then hit refresh, then navigation no longer works after that point.

This felt very much like the same challenge I have previously encountered with deploying a vue-router-based site to Netlify, which I resolved by writing a _redirects file with the following contents:

/* /index.html 200

However that doesn't seem to fix the problem for me with vitepress. Anyone know how to fix this?

I have cleanUrls set to "with-subfolders".

[rgilton]

I think I may have found the answer: Update vitepress. I was running 1.0.0-alpha.10. Updating to 1.0.0-alpha.38 seems to have fixed the problem.

[rgilton]

Ah ok -- is there a _redirects config that should go with that? Presumably netlify won't redirect /foo to /foo.html without some config.

(I've just poked around with my existing with-subfolders setup and there are still some problems with it -- it without-subfolders will work better, I'm all ears!)

[brc-dd]

is there a _redirects config that should go with that? Presumably netlify won't redirect /foo to /foo.html without some config.

Why do you want that?

if without-subfolders will work better, I'm all ears!

Yeah, without-subfolders works best (we have that enabled on VitePress' docs too). with-subfolder should've worked fine too IG after recent changes in page hash resolution (without any additional config). Is there a specific issue you're having with with-subfolders?

[rgilton]

Why do you want that?

I like the clean URL /foo instead of /foo.html.

Is there a specific issue you're having with with-subfolders?

Yes, if I have two files in a directory: a.md and b.md:

.
└── foo
    ├── a.md   <- Contains a link to b: i.e. '[b](./b.md)'
    └── b.md

Then pass that through vitepress and upload to netlify. If I navigate to /foo/a via the root index.html then everything seems to work: I can click the link to b on that page and end up at the right place.

However, if I refresh after reaching /foo/a (or just directly go to that URL without going via the root index.html), then the link to b does not work. Clicking it sends the browser to /foo/a/b. I also notice that after the browser has reached /foo/a, a / ends up being added to the end of the URL -- so we're at /foo/a/.

(To be clear, this is on netlify, with no _redirects file, and with 1.0.0-alpha.38).

[brc-dd]

I like the clean URL /foo instead of /foo.html.

For clean urls, you don't need to redirect /foo to /foo.html, you just need to serve /foo.html when someone accesses /foo (/foo/index.html when someone accesses /foo/). Netlify does this without any config.

For the second part, we forgot to update the docs in #1575

There is one thing to note about relative links, since they are resolved by the browser, they look for the last / in the url, and resolve them relative to that. So depending on how the host redirects and handles trailing slashes, relative URLs might break.

[rgilton]

I've played around with without-subfolders now. This works perfectly with Netlify as far as I can tell.

I hadn't appreciated that netlify would serve the contents of /foo.html for a request for /foo -- that was the key missing part of my knowledge.

Thanks for you help @brc-dd