Route segments without a leading dash - to support routes like /@user_one /@user_two?

[maxcan]

I'm trying to migrate from React Router for a fairly large project because TanStack Router has been such a pleasure in other projects.

But, I need to support routes with a leading '@' (similar to tik tok or instagram a couple of years ago). I can't quite figure out how to do this in TS Router. Is it possible?

Sample routes:

/@bob
/@alice
/@etc..

but then support "conventional" routes like:

/events
/event/$eventId

Is this possible? What would be the best approach?

[etc]

Don't tag me bro.

[maxcan]

Sorry about that 😆.. completely unintentional

[SeanCassiere]

Not really.

You could handle this yourself using the parseParams and stringifyParams config options in RouteOptions.

Or you could parse it in the beforeLoad callback and pass it down to your child routes using Route Context. Like this:

// src/routes/$userId.tsx
export const Route = createFileRoute('/$userId')({
  beforeLoad: ({ params: { userId } }) => {
    return { userId: customParseFunction(userId) }
  },
  loader: ({ context: { userId } }) => loadUser(userId)
})

// src/routes/$userId.foo.tsx
export const Route = createFileRoute('/$userId/foo')({
  loader: ({ context: { userId } }) => loadFooDataForUser(userId)
})

[maxcan]

Thank you. Parsing out the '@' isn't the problem but in this case, the src/routes/$userId.tsx would effectively be a wildcard route matching anything, correct?

[SeanCassiere]

Yea, more or less, provided a value is present.