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.