Skip to content

fix(router-core): optional-path-param usage variation matches #5176

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 16 commits into
base: main
Choose a base branch
from
+2,373 −1,713
Open

fix(router-core): optional-path-param usage variation matches #5176

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
718e07d
add tests
nlynzaad Sep 20, 2025
148143b
update isMatch to test more variations for matching
nlynzaad Sep 20, 2025
6770877
update docs
nlynzaad Sep 20, 2025
435f899
few more tweaks
nlynzaad Sep 20, 2025
afd99a9
add e2e tests
nlynzaad Sep 21, 2025
1d76023
code rabbit suggestions
nlynzaad Sep 21, 2025
bae8f8b
code rabbit suggestions
nlynzaad Sep 21, 2025
dc6e771
Merge branch 'main' into optional-param-required-param-index-route
nlynzaad Sep 21, 2025
c4f784c
fix test
nlynzaad Sep 21, 2025
abd7e99
code rabbit suggestions
nlynzaad Sep 21, 2025
91cb686
cleanup
nlynzaad Sep 21, 2025
96e5190
nitpick cleanup
nlynzaad Sep 21, 2025
b9337d8
rename case-sensitive test to be aligned with non-case sensitive
nlynzaad Sep 21, 2025
a3e3c38
add additional test
nlynzaad Sep 21, 2025
956d51a
fix typo in test
nlynzaad Sep 21, 2025
659b011
resolve flakiness
nlynzaad Sep 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions docs/router/framework/react/guide/path-params.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,12 @@ 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`
- `/posts/{-$category}/{-$slug}/list` matches `/posts/list`, `/posts/tech/list`, and `/posts/tech/hello-world/list`
- `/users/$id/{-$tab}` matches `/users/123` and `/users/123/settings`
- `/users/{-$category}/$id/{-$tab}` matches `/users/123`, `/users/admin/123` and `/users/admin/123/settings`
- `/users/{-$category}/$id/$slug/{-$tab}` matches `/users/123/slug`, `/users/admin/123/slug` and `/users/admin/123/slug/settings`
- `/users/{-$category}/$id/{-$tab}/$slug` matches `/users/123/slug`, `/users/admin/123/slug` and `/users/admin/123/settings/slug`
- `/users/{-$category}/$id/edit/{-$tab}` matches `/users/123/edit`, `/users/admin/123/edit`, `/users/123/edit/settings` and `/users/admin/123/edit/settings`

When an optional parameter is not present in the URL, its value will be `undefined` in your route handlers and components.

Expand Down
1,697 changes: 0 additions & 1,697 deletions e2e/react-router/basic-file-based/src/routeTree.gen.ts
View file
Open in desktop

This file was deleted.

24 changes: 24 additions & 0 deletions ...asic-file-based/src/routes/optional-params/consecutive/{-$id}.{-$slug}.$category.info.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute(
'/optional-params/consecutive/{-$id}/{-$slug}/$category/info',
)({
component: RouteComponent,
})

function RouteComponent() {
const params = Route.useParams()
return (
<>
<div data-testid="consecutive-heading">
Hello "/optional-params/consecutive/-$id/-$slug/$category/info"!
</div>
<div>
params:{' '}
<span data-testid="consecutive-id-slug-category-info-params">
{JSON.stringify(params)}
</span>
</div>
</>
)
}
298 changes: 298 additions & 0 deletions e2e/react-router/basic-file-based/src/routes/optional-params/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,298 @@
import { Link, Outlet, createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/optional-params')({
component: RouteComponent,
})

function RouteComponent() {
return (
<div>
<h3 className="pb-2">optional path params</h3>
<ul className="grid mb-2">
<li>
<div>single optional only</div>
<div className="ml-5">
<ul>
<li>
<Link
data-testid="l-to-single-index"
to="/optional-params/single/{-$id}"
params={{
id: undefined,
}}
>
/optionals/single
</Link>{' '}
</li>
<li>
<Link
data-testid="l-to-single-id-index"
to="/optional-params/single/{-$id}"
params={{ id: 'id' }}
>
/optionals/single/id
</Link>{' '}
</li>
<li>
<Link
data-testid="l-to-single-path"
to="/optional-params/single/path"
>
/optionals/single/path
</Link>{' '}
</li>
</ul>
</div>
<hr />
</li>
<li>
<div>simple optional path param usage</div>
<div className="ml-5">
<ul>
<li>
<Link
data-testid="l-to-simple-index"
to="/optional-params/simple/{-$id}"
params={{
id: undefined,
}}
>
/optionals/simple
</Link>{' '}
</li>
<li>
<Link
data-testid="l-to-simple-id-index"
to="/optional-params/simple/{-$id}"
params={{ id: 'id' }}
>
/optionals/simple/id
</Link>{' '}
</li>
<li>
<Link
data-testid="l-to-simple-path"
to="/optional-params/simple/{-$id}/path"
params={{ id: undefined }}
>
/optionals/simple/path
</Link>{' '}
</li>
<li>
<Link
data-testid="l-to-simple-id-path"
to="/optional-params/simple/{-$id}/path"
params={{ id: 'id' }}
>
/optionals/simple/id/path
</Link>
</li>
</ul>
</div>
<hr />
</li>
<li>
<div>With path params and index page</div>
<div className="ml-5">
<ul>
<li>
<Link
data-testid="l-to-withIndex-category-index"
to="/optional-params/withIndex/{-$id}/$category"
params={{
id: undefined,
category: 'category',
}}
>
/optionals/withIndex/category
</Link>{' '}
</li>
<li>
<Link
data-testid="l-to-withIndex-id-category-index"
to="/optional-params/withIndex/{-$id}/$category"
params={{
id: 'id',
category: 'category',
}}
>
/optionals/withIndex/id/category
</Link>{' '}
</li>
<li>
<Link
data-testid="l-to-withIndex-category-path"
to="/optional-params/withIndex/{-$id}/$category/path"
params={{
id: undefined,
category: 'category',
}}
>
/optionals/withIndex/category/path
</Link>{' '}
</li>
<li>
<Link
data-testid="l-to-withIndex-id-category-path"
to="/optional-params/withIndex/{-$id}/$category/path"
params={{
id: 'id',
category: 'category',
}}
>
/optionals/withIndex/id/category/path
</Link>{' '}
</li>
</ul>
</div>
<hr />
</li>
<li>
<div>Consecutive path params</div>
<div className="ml-5">
<ul>
<li>
<Link
data-testid="l-to-consecutive-category-info"
to="/optional-params/consecutive/{-$id}/{-$slug}/$category/info"
params={{
id: undefined,
slug: undefined,
category: 'category',
}}
>
/optionals/consecutive/category/info
</Link>{' '}
</li>
<li>
<Link
data-testid="l-to-consecutive-id-category-info"
to="/optional-params/consecutive/{-$id}/{-$slug}/$category/info"
params={{ id: 'id', slug: undefined, category: 'category' }}
>
/optionals/consecutive/id1/category/info
</Link>{' '}
</li>
<li>
<Link
data-testid="l-to-consecutive-slug-category-info"
to="/optional-params/consecutive/{-$id}/{-$slug}/$category/info"
params={{ id: undefined, slug: 'slug', category: 'category' }}
>
/optionals/consecutive/slug/category/info
</Link>{' '}
</li>
<li>
<Link
data-testid="l-to-consecutive-id-slug-category-info"
to="/optional-params/consecutive/{-$id}/{-$slug}/$category/info"
params={{ id: 'id', slug: 'slug', category: 'category' }}
>
/optionals/consecutive/id1/slug/category/info
</Link>
</li>
</ul>
</div>
<hr />
</li>
<li>
<div>Required path in between optional and path params</div>
<div className="ml-5">
<ul>
<li>
<Link
data-testid="l-to-withRequiredInBetween-category"
to="/optional-params/withRequiredInBetween/{-$id}/$category/path/{-$slug}"
params={{
id: undefined,
slug: undefined,
category: 'category',
}}
>
/optionals/withRequiredInBetween/category/path
</Link>{' '}
</li>
<li>
<Link
data-testid="l-to-withRequiredInBetween-id-category"
to="/optional-params/withRequiredInBetween/{-$id}/$category/path/{-$slug}"
params={{ id: 'id', slug: undefined, category: 'category' }}
>
/optionals/withRequiredInBetween/id/category/path
</Link>{' '}
</li>
<li>
<Link
data-testid="l-to-withRequiredInBetween-category-slug"
to="/optional-params/withRequiredInBetween/{-$id}/$category/path/{-$slug}"
params={{ id: undefined, slug: 'slug', category: 'category' }}
>
/optionals/withRequiredInBetween/category/path/slug
</Link>{' '}
</li>
<li>
<Link
data-testid="l-to-withRequiredInBetween-id-category-slug"
to="/optional-params/withRequiredInBetween/{-$id}/$category/path/{-$slug}"
params={{ id: 'id', slug: 'slug', category: 'category' }}
>
/optionals/withRequiredInBetween/id/category/path/slug
</Link>
</li>
</ul>
</div>
<hr />
</li>
<li>
<div>Required Param in between optional path params</div>
<div className="ml-5">
<ul>
<li>
<Link
data-testid="l-to-withRequiredParam-category"
to="/optional-params/withRequiredParam/{-$id}/$category/{-$slug}/info"
params={{
id: undefined,
slug: undefined,
category: 'category',
}}
>
/optionals/withRequiredParam/category/info
</Link>{' '}
</li>
<li>
<Link
data-testid="l-to-withRequiredParam-id-category"
to="/optional-params/withRequiredParam/{-$id}/$category/{-$slug}/info"
params={{ id: 'id', slug: undefined, category: 'category' }}
>
/optionals/withRequiredParam/id1/category/info
</Link>{' '}
</li>
<li>
<Link
data-testid="l-to-withRequiredParam-category-slug"
to="/optional-params/withRequiredParam/{-$id}/$category/{-$slug}/info"
params={{ id: undefined, slug: 'slug', category: 'category' }}
>
/optionals/withRequiredParam/category/slug/info
</Link>{' '}
</li>
<li>
<Link
data-testid="l-to-withRequiredParam-id-category-slug"
to="/optional-params/withRequiredParam/{-$id}/$category/{-$slug}/info"
params={{ id: 'id', slug: 'slug', category: 'category' }}
>
/optionals/withRequiredParam/id1/category/slug/info
</Link>
</li>
</ul>
</div>
</li>
</ul>
<hr />
<Outlet />
</div>
)
}
16 changes: 16 additions & 0 deletions e2e/react-router/basic-file-based/src/routes/optional-params/simple/{-$id}.index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/optional-params/simple/{-$id}/')({
component: RouteComponent,
})

function RouteComponent() {
const params = Route.useParams()

return (
<div data-testid="simple-index-heading">
Hello "/optional-params/simple/-$id/"!
<span data-testid="simple-index-params">{JSON.stringify(params)}</span>
</div>
)
}
15 changes: 15 additions & 0 deletions e2e/react-router/basic-file-based/src/routes/optional-params/simple/{-$id}.path.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/optional-params/simple/{-$id}/path')({
component: RouteComponent,
})

function RouteComponent() {
const params = Route.useParams()
return (
<div data-testid="simple-path-heading">
Hello "/optional-params/simple/-$id/path"!
<span data-testid="simple-path-params">{JSON.stringify(params)}</span>
</div>
)
}
13 changes: 13 additions & 0 deletions e2e/react-router/basic-file-based/src/routes/optional-params/single/path.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/optional-params/single/path')({
component: RouteComponent,
})

function RouteComponent() {
return (
<div data-testid="single-path-heading">
Hello "/optional-params/single/path"!
</div>
)
}
Loading
Loading