fix: fix encoding/matching issues with special chars #9477

brophdawg11 · 2022-10-18T21:04:16Z

tl;dr;
Replaces #9458 with a fairly comprehensive test suite to ensure that we can handle paths with special characters, match against them, and received properly encoded values from useLocation that match what window.location would report.

Background
In 6.3 and prior we were always in a reactive mode to window.history so for example, we would history.pushState and then call the listeners with the value from window.location. This flow meant that we inherited the built-in URL encoding performed by window.location. Therefore, if you clicked <Link to="/✅"> you got { pathname: "/%E2%9C%85", ... } from useLocation().

In 6.4, we go through the new @remix-run/router first and do all of our data fetching and updateState before history.pushState - so we weren't getting the encoding. So at the moment, if you click <Link to="/✅"> you incorrectly get { pathname: "/✅", ... } from useLocation().

We also have historically had trouble with defining route paths with special characters since we were matching encoded paths from window.location to unencoded paths in our <Route> objects.

This PR fixes these 3 main things surrounding special characters:

history should always send through the window.location to listeners to ensure full backwards compatibility with 6.3
When routing in a data router via router.navigate we manually encode the incoming location using new URL() so we get the same encoding behavior as window.location. This ensures that useLocation in .4 matches what it would have returned in a 6.3 app
Since we are now consistently operating on incoming encoded paths, but we want to preserve the ability to match routes defined with special characters we gained from fix: update matchPath to avoid false positives on dash-separated segments #9300, we now decode the incoming pathname prior to matching it against our <Route path> values - allowing us to do <Route path="✅" />

changeset-bot · 2022-10-18T21:04:19Z

🦋 Changeset detected

Latest commit: 314888d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
react-router-dom	Patch
@remix-run/router	Patch
react-router	Patch
react-router-dom-v5-compat	Patch
react-router-native	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

brophdawg11 · 2022-10-18T21:05:09Z

packages/react-router-dom/__tests__/navigate-encode-params-test.tsx

@@ -88,7 +89,8 @@ describe("navigate with params", () => {
      let pathname = window.location.pathname.replace(/%20/g, "+");
      expect(pathname).toEqual("/blog/react+router");

-      expect(node.innerHTML).toMatch(/react router/);
+      // Note decodeURIComponent doesn't decode +
+      expect(node.innerHTML).toMatch(/react\+router/);


This was a false positive test previously - and was seemingly only because we weren't resetting history state between tests. decodeURIComponent doesn't decode the + sign

brophdawg11 · 2022-10-18T21:05:47Z

packages/router/history.ts

@@ -570,7 +570,7 @@ function getUrlBasedHistory(
    }

    if (v5Compat && listener) {
-      listener({ action, location });
+      listener({ action, location: history.location });


History should pass the encoded location (from window.location after pushState) and not the incoming unencoded location

brophdawg11 · 2022-10-18T21:06:09Z

packages/router/router.ts

+      pathname: url.pathname,
+      search: url.search,
+      hash: url.hash,
+    };


Encode all incoming router.navigate() locations the same way window.location would

Note to self - move this to a history.encodeLocation method since we don't need to encode for memory histories

brophdawg11 · 2022-10-18T21:06:29Z

packages/router/utils.ts

+      // incoming pathnames are always encoded from either window.location or
+      // from route.navigate, but we want to match against the unencoded paths
+      // in the route definitions
+      safelyDecodeURI(pathname)


Decode incoming pathnames for matching against our route definitions

brophdawg11 · 2022-10-18T21:11:01Z

packages/react-router-dom/__tests__/special-characters-test.tsx

+ * }
+ */
+
+let specialChars = [


Large set of special character "definitions" of the character, and what we expect it to show up as in location.pathname, location.search, and location.hash since it varies according to the spec: https://url.spec.whatwg.org/#c0-control-percent-encode-set

brophdawg11 · 2022-10-18T21:11:55Z

packages/react-router-dom/__tests__/special-characters-test.tsx

+      let routeElements = (
+        <>
+          <Route path="/path" element={<Comp heading="Static Route" />} />
+          <Route
+            path="/inline-param/:slug"
+            element={<Comp heading="Inline Nested Param Route" />}
+          />
+          <Route path="/param">
+            <Route
+              path=":slug"
+              element={<Comp heading="Parent Nested Param Route" />}
+            />
+          </Route>
+          <Route
+            path="/inline-splat/*"
+            element={<Comp heading="Inline Nested Splat Route" />}
+          />
+          <Route path="/splat">
+            <Route
+              path="*"
+              element={<Comp heading="Parent Nested Splat Route" />}
+            />
+          </Route>
+          <Route
+            path="/reset"
+            element={<Link to={navigatePath}>Link to path</Link>}
+          />
+          <Route path="/*" element={<Comp heading="Root Splat Route" />} />
+        </>
+      );


Test that we can support matching special characters when used in dynamic/splat params in root and nested scenarios

brophdawg11 · 2022-10-18T21:13:37Z

packages/react-router-dom/__tests__/special-characters-test.tsx

+        </>
+      );
+
+      // Render BrowserRouter at the initialized location and confirm we get


The section here and below basically checks 4 things:

We match routes properly on initial BrowserRouter load (reading from window.location)

We match routes properly on client-side BrowserRouter navigations (through history.push)

We match routes properly on initial createBrowserRouter/RouterProvider load (reading from window.location)

We match route properly on client-side createBrowserRouter/RouterProvider navigations (through router.navigate)

brophdawg11 · 2022-10-18T21:14:00Z

packages/react-router-dom/__tests__/special-characters-test.tsx

+        <>
+          <Route path={`/${char}`} element={<Root />} />
+          <Route path="/nested">
+            <Route path={char} element={<StaticNested />} />
+          </Route>
+          <Route path="/:param">
+            <Route path={char} element={<ParamNested />} />
+          </Route>
+          <Route path="/reset" element={<Link to={path}>Link to path</Link>} />
+          <Route path="*" element={<h1>Not Found</h1>} />
+        </>
+      );


Test that we can define and match against route paths containing special characters

packages/router/utils.ts

fix: fix encoding/matching issues with special chars

c5bda59

remix-cla-bot bot added the CLA Signed label Oct 18, 2022

brophdawg11 commented Oct 18, 2022

View reviewed changes

brophdawg11 added 2 commits October 18, 2022 17:24

add changeset

34a7dd1

Bump bundle

314888d

mjackson reviewed Oct 20, 2022

View reviewed changes

packages/router/utils.ts Show resolved Hide resolved

mjackson approved these changes Oct 20, 2022

View reviewed changes

packages/router/utils.ts Show resolved Hide resolved

brophdawg11 merged commit 80d5844 into dev Oct 21, 2022

brophdawg11 deleted the brophdawg11/special-chars branch October 21, 2022 18:01

github-actions bot mentioned this pull request Oct 21, 2022

chore: Update version for release (pre) #9490

Merged

brophdawg11 mentioned this pull request Oct 24, 2022

fix: make url-encoding history-aware #9496

Merged

github-actions bot mentioned this pull request Nov 1, 2022

chore: Update version for release #9536

Merged

timdorr mentioned this pull request Nov 10, 2022

[Bug]: Nested route path not resolved when path has a space in 6.4.3, but used to work on 6.4.2 #9580

Closed

soniaAguilarPeiron mentioned this pull request Oct 18, 2023

Alerting: Fix incorrect decoding for alert rules with % characters grafana/grafana#76148

Merged

This was referenced Apr 7, 2024

fix(react-server): decode dynamic route params hi-ogawa/vite-plugins#271

Merged

inconsistent NavLink matching hi-ogawa/react-server-demo-remix-tutorial#3

Closed

location.pathname is not encoded on client side navigation TanStack/router#1441

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: fix encoding/matching issues with special chars #9477

fix: fix encoding/matching issues with special chars #9477

brophdawg11 commented Oct 18, 2022

changeset-bot bot commented Oct 18, 2022 •

edited

brophdawg11 Oct 18, 2022

brophdawg11 Oct 18, 2022

brophdawg11 Oct 18, 2022

brophdawg11 Oct 18, 2022

brophdawg11 Oct 18, 2022

brophdawg11 Oct 18, 2022

brophdawg11 Oct 18, 2022

brophdawg11 Oct 18, 2022

brophdawg11 Oct 18, 2022

fix: fix encoding/matching issues with special chars #9477

fix: fix encoding/matching issues with special chars #9477

Conversation

brophdawg11 commented Oct 18, 2022

changeset-bot bot commented Oct 18, 2022 • edited

🦋 Changeset detected

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

changeset-bot bot commented Oct 18, 2022 •

edited