feat(react-router): allow unencoded characters in dynamic path segments

[alma-lp]

Currently any path params with a "@" character are URI encoded. Modern browsers handle this fine and it is a common pattern (e.g. youtube.com/@exampleChannel) to have them unencoded in a path.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit e21f904. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected --targets=test:eslint,test:unit,test:e2e,test:types,test:build,build --parallel=3
• nx run-many --target=build --exclude=examples/** --exclude=e2e/**

---

Sent with 💌 from NxCloud.

[pkg-pr-new]

Open in Stackblitz

More templates

• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-file-based-codesplitting
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-basic-ssr-file-based
• tanstack-router-react-example-basic-ssr-streaming-file-based
• tanstack-router-react-example-basic-virtual-file-based
• tanstack-router-react-example-basic-virtual-inside-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-esbuild-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-webpack-file-based
• router-monorepo-react-query
• router-mono-simple
• tanstack-router-react-example-scroll-restoration
• tanstack-router-search-validator-adapters
• tanstack-start-example-basic
• tanstack-start-example-basic-auth
• tanstack-start-example-basic-react-query
• tanstack-start-example-basic-rsc
• tanstack-start-example-clerk-basic
• tanstack-start-example-convex-trellaux
• tanstack-start-example-supabase-basic
• tanstack-start-example-trellaux
• tanstack-start-example-counter
• tanstack-router-react-example-with-framer-motion
• tanstack-router-react-example-with-trpc
• tanstack-router-react-example-with-trpc-react-query

@tanstack/create-router

pnpm add https://pkg.pr.new/@tanstack/create-router@2677

@tanstack/eslint-plugin-router

pnpm add https://pkg.pr.new/@tanstack/eslint-plugin-router@2677

@tanstack/react-cross-context

pnpm add https://pkg.pr.new/@tanstack/react-cross-context@2677

@tanstack/history

pnpm add https://pkg.pr.new/@tanstack/history@2677

@tanstack/react-router

pnpm add https://pkg.pr.new/@tanstack/react-router@2677

@tanstack/react-router-with-query

pnpm add https://pkg.pr.new/@tanstack/react-router-with-query@2677

@tanstack/router-arktype-adapter

pnpm add https://pkg.pr.new/@tanstack/router-arktype-adapter@2677

@tanstack/router-cli

pnpm add https://pkg.pr.new/@tanstack/router-cli@2677

@tanstack/router-devtools

pnpm add https://pkg.pr.new/@tanstack/router-devtools@2677

@tanstack/router-generator

pnpm add https://pkg.pr.new/@tanstack/router-generator@2677

@tanstack/router-plugin

pnpm add https://pkg.pr.new/@tanstack/router-plugin@2677

@tanstack/router-valibot-adapter

pnpm add https://pkg.pr.new/@tanstack/router-valibot-adapter@2677

@tanstack/router-vite-plugin

pnpm add https://pkg.pr.new/@tanstack/router-vite-plugin@2677

@tanstack/router-zod-adapter

pnpm add https://pkg.pr.new/@tanstack/router-zod-adapter@2677

@tanstack/start

pnpm add https://pkg.pr.new/@tanstack/start@2677

@tanstack/start-vite-plugin

pnpm add https://pkg.pr.new/@tanstack/start-vite-plugin@2677

@tanstack/virtual-file-routes

pnpm add https://pkg.pr.new/@tanstack/virtual-file-routes@2677

commit: e21f904

[schiller-manuel]

should we maybe expose this as a config option to the user? some might want different characters, some might want no characters etc?

[SeanCassiere]

should we maybe expose this as a config option to the user? some might want different characters, some might want no characters etc?

That's a good idea!

@alma-lp would this be something you'd be able to implement?

[alma-lp]

should we maybe expose this as a config option to the user? some might want different characters, some might want no characters etc?

That's a good idea!

@alma-lp would this be something you'd be able to implement?

I should. I'll take a look.

[schiller-manuel]

please add a test that configures router with some allowed chars, navigate to a route by setting a path param to contain one of the allowed chars and then check if the url is not encoded

[CanRau]

Interesting. this is a completely different approach, but seemingly much simpler, than adding prefix/suffix support, tho if I understand it correctly would actually be sufficient for my usecase as we use /@username routes as well.

Just for reference, I added some thoughts here #707 (comment)

[schiller-manuel]

@CanRau this does not allow prefixes. this just prevents path params containing e.g. "@" to be urlencoded. the path param will still be the full string @foo

[CanRau]

Yea just realized that it wouldn't help with route matching 😔 which we need as we have those /@username paths at the root next to other dynamic and non-dynamic routes 😬

[jmkd3v]

It looks like this fix is incomplete. Links to routes such as <Link to="/$handle" params={{ handle: "@hello" }} /> still direct to /%40handle. Something like <Link to="/@hello" /> where the url-encoded character is in the to prop itself directs to the correct page, but my understanding is that this is not the correct approach.

[CanRau]

@jmkd3v have you configured allowed characters on your router?

const router = createRouter({
  ...
  pathParamsAllowedCharacters: ['@']
})

[jmkd3v]

oh, I didn't know I had to configure it! that fixed it, thank you so much @CanRau!