Deployed gatsby proyect on nginx and reach router mix breaks the styles on refreshing page

[alienriquebm]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I have a SPA landing page build with gatsby and deployed on a server with nginx.
The apps works well and you can navigate between pages using the nav bar. The problem is when you refresh the page on another router <> home. It breaks and mix the styles of the main component (Home) and the sub-route that you are seeing (/about, /blog, /contact...)

My index.js files show this:

const App = () => {
  return (
    <ApolloProvider client={client}>
      <ThemeLayout>
        <Router>
          <Home path="/" />
          <Contact path="/contact" />
          <About path="/about" />
          <Products path="/products" />
          <Blog path="/blog">
            <BlogHome path="/" />
            <BlogArticlesList path="article-list" />
            <BlogHome path="article/:id" />
          </Blog>
          <NotFoundPage default />
        </Router>
      </ThemeLayout>
    </ApolloProvider>
  );
};

The Home component goes like this:

const Home = () => {
  return (
    <AppWrapper>
      <MainSection>
        <MenuBar />
        <AppContent>
          <Hero>
            <HeroInfo>
              <HeroInfoTitle>
                Servicios de transporte satelital y terrestre de voz, video y datos
              </HeroInfoTitle>
              <HeroInfoDescription>
                Telecomunicaciones Bantel con más de 30 años en el mercado regresa para ofrecer
                servicios de transporte satelital y terrestre de voz, video y datos; con el fin de
                conectar de manera estable, segura y continua a todos nuestros clientes.
              </HeroInfoDescription>
              <CallToAcions>
                <Button type="primary">Leer más</Button>
                <Button>Contácto</Button>
              </CallToAcions>
            </HeroInfo>
            <HeroInfoImageWrapper>
              <HeroInfoImage src={HeroImage} />
            </HeroInfoImageWrapper>
          </Hero>
        </AppContent>
      </MainSection>

      <PageSection colored>
        <WhatWeOfferSection>
          <span>Tenemos grandes cosas para usted</span>
          <SectionTitle style={{ marginTop: 12 }}>Qué te ofrecemos</SectionTitle>
          <Offers>
            <Offer
              title="Somos un equipo preparado"
              description="En Bantel cuentas con un equipo preparado para lograr todas aquellas conexiones que necesites a través de redes terrestres o satelitales."
              icon={<TeamOutlined />}
            />
            <Offer
              title="Estabilidad en tu conexión"
              description="En Bantel cuentas con un equipo preparado para lograr todas aquellas conexiones que necesites a través de redes terrestres o satelitales."
              icon={<ThunderboltOutlined />}
            />
            <Offer
              title="Atención personalizada"
              description="En Bantel cuentas con un equipo preparado para lograr todas aquellas conexiones que necesites a través de redes terrestres o satelitales."
              icon={<UserSwitchOutlined />}
            />
            <Offer
              title="Seguimiento del servicio"
              description="En Bantel cuentas con un equipo preparado para lograr todas aquellas conexiones que necesites a través de redes terrestres o satelitales."
              icon={<SearchOutlined />}
            />
          </Offers>
        </WhatWeOfferSection>
      </PageSection>

      <PageSection>
        <PrimaryServiceWrapper>
          <PrimaryServiceImg>
            <img src={PrimaryServiceImage} alt="Primary Service" />
          </PrimaryServiceImg>
          <PrimaryServiceTexts>
            <SectionTitle>Servicio destacado </SectionTitle>
            <PrimaryServiceDescription>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nulla non
              fermentum sagittis.
            </PrimaryServiceDescription>
            <PrimaryServiceItems>
              <PrimaryServiceItem>
                <CheckCircleOutlined />
                <span>Característica 1</span>
              </PrimaryServiceItem>
              <PrimaryServiceItem>
                <CheckCircleOutlined />
                <span>Característica 2</span>
              </PrimaryServiceItem>
              <PrimaryServiceItem>
                <CheckCircleOutlined />
                <span>Característica 3 súper interesante</span>
              </PrimaryServiceItem>
            </PrimaryServiceItems>
            <Button type="primary">Leer más</Button>
          </PrimaryServiceTexts>
        </PrimaryServiceWrapper>
      </PageSection>
      <Footer />
    </AppWrapper>
  );
};

My nginx config:

You can see the live demo on www.bantel.com.ve

Thanks for any help you can give me about this.

Reproduction Link

https://www.bantel.com.ve

Steps to Reproduce

1. Pick a page on the navigation bar
2. Now refresh the page
3. See the developers tools and you will see a mix of styles between Home page component and the page that you are seeing.

Expected Result

The pages must be showed on the same way using the navigation bar.

Actual Result

For any reason, reach router are mixing the styles between the main page component (Home) and the rest of pages.

Environment

System:
  OS: Ubuntu Server 20.04
  CPU: Virtualized 4-Core
Binaries:
  Node: 14.16.0
  npm: 6.14.15
Languages:
  Javascript: ECMASCRIPT > 6
Browsers:
  Chrome: 94.0.4606.61 

npmPackages:
    "@ant-design/icons": "^4.6.2",
    "@apollo/client": "^3.4.15",
    "@reach/router": "^1.3.4",
    "antd": "^4.16.10",
    "babel-plugin-styled-components": "^1.13.2",
    "dayjs": "^1.10.7",
    "gatsby": "^3.10.2",
    "gatsby-plugin-antd": "^2.2.0",
    "gatsby-plugin-react-helmet": "^4.10.0",
    "gatsby-plugin-resolve-src": "^2.1.0",
    "gatsby-plugin-sass": "^4.10.0",
    "gatsby-plugin-styled-components": "^4.10.0",
    "graphql": "^15.6.0",
    "markdown-to-jsx": "^7.1.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-hook-reading-time": "^1.0.0",
    "sass": "^1.37.0",
    "styled-components": "^5.3.0",
    "typewriter-effect": "^2.18.0"

Config Flags

No response

[alienriquebm]

This was fixed implementing the new way to use the reach-router as described here removing the content on the file gatsby-node.js about onCreatePage.

I create a file called [...].js under pages directory and added this config on the nginx configuration file:

        location / {
                try_files $uri /[...]/index.html;
        }