Add strict client-side routes - always respect presence or absence of a trailing slash

[idoros]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

When running a site with trailingSlash: false, the build creates an html file per page, then when going to that page URL with an added slash (e.g. site.com/page/) the server returns a page not found with a 404 code as expected, but the client router is re-rendering the page as if the slash wasn't part of the URL, which in turn causes links to break.

Reproducible demo

https://stylable.io/docs/guides/migration-v3/

Steps to reproduce

1. open network to see 404 response (you can sometimes see the 404 flickers)
2. see page is re-rendered with the content as if the slash was not there
3. go to the Runtime reference link and click it to see a broken link
4. change the initial url to be without the slash and everything works fine

Expected behavior

Client should respect 404 page and either keep the 404 as is or redirect the URL to remove the slash

Actual behavior

Client is "fixing" routing without actually redirecting the URL resulting in broken links and 404 flicker

Your environment

• Public source code: https://github.com/wixplosives/stylable.io
• Public site URL: https://stylable.io/
• Docusaurus version used: 2.3.1

Self-service

• I'd be willing to fix this bug myself.

[slorber]

then when going to that page URL with an added slash (e.g. site.com/page/) the server returns a page not found with a 404 code as expected,

Actually this is not "expected", it depends on the host and the behavior you want.

You'll notice that Docusaurus website has a different behavior, and both URLs work without returning a 404:

• https://docusaurus.io/docs/installation (canonical URL)
• https://docusaurus.io/docs/installation/

That behavior does not look wrong to me.

You can choose to serve 1 URL, or both, as long as you have the canonical URL set correctly in page metadata, your SEO shouldn't be penalized.

You could figure out how to configure your host to have the exact same behavior as Docusaurus if you want. Some hosts may not allow that easily though.

the client router is re-rendering the page as if the slash wasn't part of the URL

We choose to not use the strict option of React-Router, that decides if we care or not about the trailing slash.
https://v5.reactrouter.com/web/api/Route/strict-bool

This makes sense to be fault tolerant for me by default, and allow most sites to be served successfully from both URLs.

Now we could add a Docusaurus option to make the client-side routing more strict in case you really want to ensure a single URL is successfully served.

I'm going to requalify this issue as a feature request to discuss the introduction of strict client-side routes. Not sure what could be the public API for it. Do we need an extra config attribute? Or maybe it's better to reuse the trailingSlash attribute and allow provide a more complex object value?

which in turn causes links to break.

That's a different problem. You have links that are sensitive to trailing slashes.

Our docs provide linking recommendations: https://docusaurus.io/docs/markdown-features/links

In particular, we discourage the usage of regular html relative links (./xyz, in favor of markdown relative links (./xyz.md) for that reason

[idoros]

Thank you for the quick response!

Actually this is not "expected", it depends on the host and the behavior you want.

Fair enough. But the default non-configurable tolerant routing together with the broken links is the main issue (the flickering 404 is a less significant).

So my options are:

• fixing all the links to be relative file paths with extensions
• somehow change github-pages behavior to serve the page.html/
• wait for a configuration option to make the routing strict as the host

Is there a way to override react router configuration?

[slorber]

fixing all the links to be relative file paths with extensions

In any case that seems like a good to do

somehow change github-pages behavior to serve the page.html/

GitHub pages unfortunately does not provide any server-side option and not really an host I'd recommend if you want any kind of server-side control

wait for a configuration option to make the routing strict as the host

yes

In case you want to contribute (or simply make a PR POC with an hardcoded value), this is where you could add the strict option (similar to exact):

https://github.com/facebook/docusaurus/blob/main/packages/docusaurus/src/server/routes.ts#L101

Is there a way to override react router configuration?

I don't think there's a way to do that in userland without core modifications.

Maybe this could work but not sure: creating a Webpack plugin that modifies the .docusaurus/router.js file just before Webpack compilation starts.