Skip to content

fix(router-core): Backslash in path parameters are incorrectly restored from URL #3987

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

leesb971204
Copy link
Contributor

@leesb971204 leesb971204 commented Apr 14, 2025

fixes: #3962

Please ignore the commits before the 1c3303b, as they include work related to another PR.


I believe the bug is caused by an unnecessary decodeURI in path.ts.
It works well, but I think we need to reconsider the test case we wrote. I think the test case is incorrectly written.

If my understanding is incorrect, I apologize.

Copy link

nx-cloud bot commented Apr 14, 2025

View your CI Pipeline Execution ↗ for commit 146c0ac.

Command Status Duration Result
nx affected --targets=test:eslint,test:unit,tes... ❌ Failed 5m 44s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 2m 2s View ↗

☁️ Nx Cloud last updated this comment at 2025-04-20 01:45:57 UTC

Copy link

pkg-pr-new bot commented Apr 14, 2025

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@3987

@tanstack/create-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/create-router@3987

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@3987

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@3987

@tanstack/create-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/create-start@3987

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@3987

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@3987

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@3987

@tanstack/react-router-with-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-with-query@3987

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@3987

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@3987

@tanstack/react-start-config

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-config@3987

@tanstack/react-start-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-plugin@3987

@tanstack/react-start-router-manifest

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-router-manifest@3987

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@3987

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@3987

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@3987

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@3987

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@3987

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@3987

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@3987

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@3987

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@3987

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@3987

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@3987

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@3987

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@3987

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@3987

@tanstack/solid-start-config

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-config@3987

@tanstack/solid-start-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-plugin@3987

@tanstack/solid-start-router-manifest

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-router-manifest@3987

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@3987

@tanstack/start

npm i https://pkg.pr.new/TanStack/router/@tanstack/start@3987

@tanstack/start-api-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-api-routes@3987

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@3987

@tanstack/start-config

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-config@3987

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@3987

@tanstack/start-server-functions-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-client@3987

@tanstack/start-server-functions-fetcher

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-fetcher@3987

@tanstack/start-server-functions-handler

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-handler@3987

@tanstack/start-server-functions-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-server@3987

@tanstack/start-server-functions-ssr

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-ssr@3987

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@3987

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@3987

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@3987

commit: 146c0ac

@schiller-manuel
Copy link
Contributor

can you please remove the irrelevant commits from this PR?

…ecoding logic

Signed-off-by: leesb971204 <leesb971204@gmail.com>
…URI encoded characters.

Signed-off-by: leesb971204 <leesb971204@gmail.com>
@leesb971204
Copy link
Contributor Author

leesb971204 commented Apr 15, 2025

@schiller-manuel

I think we need to write separate tests for paths containing special characters, depending on whether we use $ with params or define the path directly.
For example, when accessing a path like %C3%A9 using $ and params props in <Link>, the path remains %C3%A9, but when it’s defined directly, it gets decoded and becomes é.
This behavior was the same before and after my changes in my local, but I don’t understand why the tests are failing only after my modification...

Copy link
Member

@SeanCassiere SeanCassiere left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aside of the test regressions present in the unit testing, I'm not sure if this is the right approach.

I'm wondering whether we should be doing any decoding of the named path parameters (not the splat parameter) at all. Perhaps, we shouldn't be encoding the path parameters at all? 🤔

Whilst, URI encoding works for the URL Search Parameters, perhaps we shouldn't be doing this for the path parameters. Essentially we'd leave them "as-is".

@leesb971204
Copy link
Contributor Author

leesb971204 commented Apr 15, 2025

Aside of the test regressions present in the unit testing, I'm not sure if this is the right approach.

I'm wondering whether we should be doing any decoding of the named path parameters (not the splat parameter) at all. Perhaps, we shouldn't be encoding the path parameters at all? 🤔

Whilst, URI encoding works for the URL Search Parameters, perhaps we shouldn't be doing this for the path parameters. Essentially we'd leave them "as-is".

// path.ts
value: part.includes('%25')
          ? part
              .split('%25')
              .map((segment) => decodeURI(segment))
              .join('%25')
          : hasUriEncodedChars(part)
            ? part
            : decodeURI(part),

👇

value: part

So do you think we should make the change as described above?
And I agree that we shouldn’t decode the path parameters, but isn’t encoding necessary to prevent browser errors?

@SeanCassiere
Copy link
Member

Yea, I'm wondering if that'd be the trick. Also, whether or not we should be doing the encodeUri... for the path parameters.

Nothing concrete. Just thinking of ideas to go about this without breaking everything for everyone 😅

@leesb971204
Copy link
Contributor Author

Yea, I'm wondering if that'd be the trick. Also, whether or not we should be doing the encodeUri... for the path parameters.

Nothing concrete. Just thinking of ideas to go about this without breaking everything for everyone 😅

Exactly. The decoding logic does seem pretty complex. For encoding, I think it might be reasonable to delegate that responsibility to the user when it comes to path parameters. But if we go that route, it would likely introduce a lot of changes to the existing codebase.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Backslash in path parameters are incorrectly restored from URL
3 participants