Support for static prefix on dynamic paths

[FugiTech]

Describe the bug

Currently TanStack Router supports dynamic path segments in the form /$var/. However it is sometimes useful to have a static prefix (or suffix) that is used as part of the matching. For example youtube.com/@ChannelName.

This is a feature request for Router to support the form /prefix$var/ (or some other way of having a static prefix mixed with a dynamic variable). Optionally it would be nice to also support suffixes, perhaps in the form /prefix$var$suffix/?

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-jwzga9?file=src%2Fmain.tsx

Steps to Reproduce the Bug or Issue

new Route({
  path: '/prefix$var',
  component: function User({ useParams }) {
    const params = useParams();
    return <div className="p-2">Hello {params.var}!</div>;
  },
});

This will not be recognized as a dynamic route and var will not be available in params

Expected behavior

var would be available in params

Screenshots or Videos

No response

Platform

N/A

Additional context

No response

[tannerlinsley]

Now that things are pretty stable, I'd like to see this PR updated.

[FugiTech]

I updated the PR to remove the merge conflicts but didn't do an in-depth look at what's changed in the last 4 months

[JacobWennebro]

Any update on this?

[schiller-manuel]

this was closed: #709

would need to be redone

[enheit]

Any updates?

[FugiTech]

My understanding is that while this feature is something they are willing to support, it is not a high priority and nobody on the core team is working on it. (I am not a maintainer and have no real knowledge of their priorities)

I originally suggested it since it'd be useful in a project I was working on, but I have since dropped that project and am not actively using TanStack router, therefore I do not have time to implement this feature myself.

If somebody is looking for this feature, I recommend filing a PR implementing it yourself. The previously mentioned PR may be helpful as a starting point, but I imagine a lot has changed since I made it.

[schiller-manuel]

@FugiTech is absolutely correct. core team is not working on this feature but we are happy to accept PRs. if anyone is interested in implementing this, reach out to us e.g. via discord

[CanRau]

Hey would love to chime in here as this is currently kinda a roadblocker for me to potentially migrate our platform to Start as we have /@username paths.

What about support [param] in addition (or instead) of $param? which could make it easier to distinguish where a dynamic param starts and ends so would make suffixed kinda trivial I think and also allow for even more advanced paths like /foo-[firstname]-[lastname]-bar or whatever, tho I personally currently don't see a need for those ^^

Maybe this has already been discussed and $ might have it's benefits over [] with file based routing?

SvelteKit and Rakkas do their params this way so automatically support /@[username]

[CanRau]

Trying to implement something, at least hacky as an example tho so far I'm failing pretty ungracefully 😅
Also one thing I realized in this /prefix-[param1]-[param2] proposal the Segment type would probably need to be extended something like

export interface Segment {
  type: 'pathname' | 'param' | 'wildcard'
  value: string
  params?: Record<string, string>
}

or a discriminated union, so that the example path with a route like /prefix-p2-p2 would generate a segment like

{
   type: 'param',
   value: 'prefix-p2-p2',
   params: {
     param1: 'p1',
     param2: 'p2'
   }
}

[CanRau]

My last attempt failed by producing an (infinite) redirection loop appending the path params over and over again 😭 😅

[tannerlinsley]

I really do want to support this. I'm just not sure what it would take on the type side just yet. I admittedly have been focused on other things. @chorobin @schiller-manuel and @SeanCassiere might continue to gain insights here, but until I ship Start beta, I can't really dive in here 100% yet.

[CanRau]

Okay I see, really appreciate your comment 🙏🏼

[CanRau]

Got a very first version hacked together, works with prefix: @[username], suffix: [username]@ and both: @[username]@, where @ could be something else, though currently only ONE dynamic param per path segment like shown here, so does NOT (yet) support things I've shown before like /prefix-[param1]-[param2], think this would require some more (potentially breaking) changes, also we don't have the need ourselves for multi dynamic params in one segment. (see edit2)

Also currently NO Typescript support and I'm not sure I can fix that myself 😇

Gonna play a little more with it and then prepare a (draft) PR (probably not tomorrow) so team could have a look whenever they have capacity.

The @ works thanks to #2677 so you'd have to set pathParamsAllowedCharacters: ['@'], in main.tsx createRouter

Edit: By the way this is not a breaking change, everything else should work as before, so you can still use $param etc.

Edit2: Actually it already supports multiple dynamic parameters in a single path segment

[cyphase]

I'm all for this being implemented, but in the meantime, it shouldn't be a hard blocker. Here's a tested workaround:

// routes/$username.tsx

import { createFileRoute, notFound } from "@tanstack/react-router";

export const Route = createFileRoute("/$username")({
  component: RouteComponent,
  beforeLoad: ({ params: { username } }) => {
    // You can use your own check of course
    if (!username.startsWith("@")) {
      notFound({ throw: true });
    }
  },
});

function RouteComponent() {
  const params = Route.useParams();
  const username = params.username.substring(1);
  return `Hello ${username}!`;
}

You could also put it in your context.

[CanRau]

@cyphase how would Router handle this if I have multiple dynamic routes at the root?

I opened a draft #2734 which would support this properly, allowing for /@[username] & /$param (or /[param]) at root level