fix(gatsby): support unicode characters for 404 page (#20165)

* fix(gatsby) support unicode characters for 404 page

* add case for navigating on the client for production e2e test

* add similar tests for development e2e

Author: beliayeu

e2e-tests/development-runtime/cypress/integration/navigation/linking.js

@@ -90,5 +90,26 @@ describe(`navigation`, () => {
         .invoke(`text`)
         .should(`equal`, `Hi from the second page`)
     })
+
+    it(`should show 404 page when url with unicode characters point to a non-existent page route when navigating directly`, () => {
+      cy.visit(`/안녕404/`, {
+        failOnStatusCode: false,
+      }).waitForRouteChange()
+
+      cy.get(`h1`)
+        .invoke(`text`)
+        .should(`eq`, `Gatsby.js development 404 page`)
+    })
+
+    it(`should show 404 page when url with unicode characters point to a non-existent page route when navigating on client`, () => {
+      cy.visit(`/`).waitForRouteChange()
+      cy.window()
+        .then(win => win.___navigate(`/안녕404/`))
+        .waitForRouteChange()
+
+      cy.get(`h1`)
+        .invoke(`text`)
+        .should(`eq`, `Gatsby.js development 404 page`)
+    })
   })
 })

e2e-tests/production-runtime/cypress/integration/1-production.js

@@ -131,5 +131,22 @@ describe(`Production build tests`, () => {
         .invoke(`text`)
         .should(`equal`, `Hi from the second page`)
     })
+
+    it(`should show 404 page when url with unicode characters point to a non-existent page route when navigating directly`, () => {
+      cy.visit(`/안녕404/`, {
+        failOnStatusCode: false,
+      }).waitForRouteChange()
+
+      cy.getTestElement(`404`).should(`exist`)
+    })
+
+    it(`should show 404 page when url with unicode characters point to a non-existent page route when navigating on client`, () => {
+      cy.visit(`/`).waitForRouteChange()
+      cy.window()
+        .then(win => win.___navigate(`/안녕404/`))
+        .waitForRouteChange()
+
+      cy.getTestElement(`404`).should(`exist`)
+    })
   })
 })

packages/gatsby/cache-dir/production-app.js

@@ -72,12 +72,14 @@ apiRunnerAsync(`onClientEntry`).then(() => {
                   id="gatsby-focus-wrapper"
                 >
                   <RouteHandler
-                    path={encodeURI(
+                    path={
                       pageResources.page.path === `/404.html`
                         ? stripPrefix(location.pathname, __BASE_PATH__)
-                        : pageResources.page.matchPath ||
-                            pageResources.page.path
-                    )}
+                        : encodeURI(
+                            pageResources.page.matchPath ||
+                              pageResources.page.path
+                          )
+                    }
                     {...this.props}
                     location={location}
                     pageResources={pageResources}