Motivation

• fix Home page renders twice, one below the other.  #10053
• fix Duplicated whole page when accessing site by your-domain.com/index.html #9916
• fix Duplicated site content if navigating to */index.html documents directly #9552

When a Docusaurus page is accessed through its non-canonical variant ending with .html, we get a weird duplicate render

It looks like React is not able to hydrate and fully recreate an app alongside the existing static markup, leading to duplicated HTML markup

This can be seen in production: https://docusaurus.io/tests.html

Note: technically it's not really a bug because URLs should be accessed through their canonical URLs, that work fine. Users should configure their host properly so that this is always the URL used: https://docusaurus.io/tests

However, not all hosts have access to a "pretty URL" setting that do the redirect to the canonical URL (and apparently Netlify's pretty URL setting does not even work for us...)

I tried investigating the problem and it's very unclear what's causing this issue. It might be React Router v5, or our integration of it through the <PendingNavigation/> component. It looks like a core problem, not a theme-classic nor layout issue because I can reproduce with an empty theme layout too. We have a normalizeLocation function in core (removing the HTML suffix before matching with React Router) but it does not look to be the problem, and using an hardcoded location lead to the same result.

It looks like just adding a wrapper div around the <App> fixes the problem (cf this PR). I suspect this is a bug in React that fails to hydrate when the <App> renders a fragment of multiple elements. I don't mind adding this extra wapper div, it probably wouldn't harm, but let's delay this to v4 considering it might break some user selectors (breaking change? 🤔 ). Also, it's possible that simply upgrading to React Router v6 and React 19 fixes the problem 🤷‍♂️ . But that does not look like a bad idea to add this wrapper for v4 anyway.

Note: to reproduce locally with docusaurus serve, it requires explicitly disabling clean URLs in serve.ts:

    serveHandler(req, res, {
      cleanUrls: false,
      // ... rest
    });

Test Plan

Netlify preview should fine for:

• https://deploy-preview-10059--docusaurus-2.netlify.app/tests.html
• https://deploy-preview-10059--docusaurus-2.netlify.app/tests/index.html
• https://deploy-preview-10059--docusaurus-2.netlify.app/tests/