Optional params?

[Maadtin]

In react router v6 they are no longer supported.

for example clients/:id? would match both /clients and /clients/1

Is there a way to achieve something like this in react location?

[tannerlinsley]

Just use the same options for both the root route and param route. Tanner Linsley

…

On Dec 9, 2021, 2:55 PM -0800, Martin Hernández Alvarado ***@***.***>, wrote: In react router v6 they are no longer supported. for example clients/:id? would match both /clients or /clients/1 Is there a way to achieve something like this in react location? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[Moshyfawn]

So, is this the idiomatic RL way to have an optional param? To duplicate the code for both the root and the dynamic param route?

{
  path: 'teams',
  children: [
    {
      path: '/',
      element: <Teams />
    },
    {
      path: ':id',
      element: <Teams />
    }
  ]
}

I'm looking for a solution to be able to get the optional parameter and, say, select a row with the selected data row ID from the URL. So, this way the same <Teams /> component would render on both teams and teams/:id paths

const { params: { id: teamId } } = useMatch()

useEffect(() => {
  if (teamId) {
    tableRef.current?.scrollToRow(teamId)
  }
}, [teamId])

Here's an example CSB

[DCzajkowski]

I think this is the way, however this will cause Teams to fully unmount and remount during navigation between / and /$id. This can break focus etc.

I think the only way to do this without a full remount is to use splat routes.

[p7gg]

@tannerlinsley
is there a built in for that in v1?

or I would have to declare 2 two routes, one with the param and one without it?

const route1  = new Route({
   path: 'user',
   ...
})

const route1  = new Route({
   path: 'user/$userID',
   ...
})

[tannerlinsley]

Correct :)

[DeluxeOwl]

@tannerlinsley Is there a plan to make this more ergonomic? Something similar to react-router https://reactrouter.com/en/main/route/route#optional-segments?

It's really annoying at the moment to support that exact pattern from the react-router link above, that is to have a lang param that sits at the root of your routes.

/:lang?/some/really/long/path

You can declare two different routes, one for / and one for /lang - but that means you'd have to duplicate every other route that comes afterwards, which is very cumbersome (duplicate objects with different parent route if code base, otherwise duplicate files if the route is file-based).

---

An alternative is to redirect on "/" to "/en" (if you're doing i18n), similarly to tanstack.com:

https://tanstack.com/router/ -> redirects to https://tanstack.com/router/latest - works ✅
https://tanstack.com/router/v1 - works ✅

That would work really nice for the docs as well

https://tanstack.com/router/latest/docs/latest/framework/react/overview - works ✅
https://tanstack.com/router/v1/docs/latest/framework/react/overview - works ✅

https://tanstack.com/router/docs/framework/react/overview - doesn't work ❌

[schiller-manuel]

eventually this is a feature that can be implemented, however it is not in our focus right now.
if you want to contribute via a PR, you are welcome!
also if you want to get this feature prioritized, reach out on discord to discuss sponsorship options.

[yslpn]

Our team is considering migrating from React Router to TanStack router, but this is the only blocker.

We have these paths

/skill
and
/skill/$skillId

We want to render the SkillPage component for two cases and type-safely use the parameters inside

const skillId = useParams({
  from: `skill/$skillId`,
  select: (params) => params.skillId,
});

This is how we determine whether the skill is created or not.

[masterbater]

@masterbater do you know how to do this with file based routing? for ex: user.$id.tsx i can't figure out how to make the $id optional

reading from the docs just add hyphen and curly braces to $id

user.{-$id}.tsx if you do flat routes

// Single optional parameter
// src/routes/posts/{-$category}.tsx

[mkarajohn]

I cannot figure this out on non-flat file based routing.

I tried writing the route like this: src/routes/_authenticated/applications/$applicationId/{-$checkGroups}/{-$check}/index.tsx (with $applicationId and {-$checkGroups} directories empty) and I get Invariant failed: Could not find an active match from "/_authenticated/applications/$applicationId/" whenever I go anywhere beyond ``applications/`

I tried copy pasting the same index file in all the in-between segments (which is not very ergonomic, so not sure this is the correct way), like this:

frontend/src/routes/_authenticated/applications/$applicationId/
├── {-$checkGroups}
│   ├── {-$check}
│   │   └── index.tsx
│   └── index.tsx
└── index.tsx

and i get Invariant failed: Could not find an active match from "/_authenticated/applications/$applicationId/" when i go anywhere beyond applications/$applicationId/

So, how does this work, it's not clear, can someone explain?

[schiller-manuel]

can you please create a new GitHub issue including a complete minimal reproducer ?

[mkarajohn]

Before I do that, would you be able to point me to usage documentation of this feature on non-flat file based routing? I think this is a documentation issue; in which case we only need to update that.

[mkarajohn]

UPDATE: i found the issue: I had a couple forgotten useParams that I never updated the from argument 😅

however I still think the docs on how to use this with non-flat file routing are lacking, I'll see if I have time to open a PR to add something in the docs

UPDATE2: in hindsight, and upon further introspection, this is probably a skill issue; I may have to take a better look to the file based routing docs. Thank you for coming to my TED talk

[masterbater]

For someone needed a updated answer it is already supported

https://tanstack.com/router/v1/docs/framework/react/guide/path-params#defining-optional-parameters

Optional parameters create flexible URL patterns:

/posts/{-$category} matches both /posts and /posts/tech
/posts/{-$category}/{-$slug} matches /posts, /posts/tech, and /posts/tech/hello-world
/users/$id/{-$tab} matches /users/123 and /users/123/settings
When an optional parameter is not present in the URL, its value will be undefined in your route handlers and components.

[rek]

its only 1 week old, but thanks for the update here!!

[gijsmin]

Indeed its just released