Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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 .changeset/plenty-jokes-listen.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@tanstack/router-core': patch
---

Fix `matchRoute` to respect parsed path parameters, route precedence, and exact trailing-slash matching.
38 changes: 38 additions & 0 deletions packages/react-router/tests/Matches.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,44 @@ test('should show pendingComponent of root route', async () => {
expect(await rendered.findByTestId('root-content')).toBeInTheDocument()
})

test('useMatchRoute matches typed params from routes with custom parse and stringify functions', async () => {
const rootRoute = createRootRoute()

function InvoiceComponent() {
const matchRoute = useMatchRoute()
const match = matchRoute({
to: '/invoices/$invoiceId',
params: { invoiceId: 123 },
})

return <div data-testid="match">{JSON.stringify(match)}</div>
}

const invoiceRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/invoices/$invoiceId',
params: {
parse: ({ invoiceId }: { invoiceId: string }) => ({
invoiceId: Number(invoiceId),
}),
stringify: ({ invoiceId }: { invoiceId: number }) => ({
invoiceId: String(invoiceId),
}),
},
component: InvoiceComponent,
})
const router = createRouter({
routeTree: rootRoute.addChildren([invoiceRoute]),
history: createMemoryHistory({ initialEntries: ['/invoices/123'] }),
})

render(<RouterProvider router={router} />)

expect(await screen.findByTestId('match')).toHaveTextContent(
'{"invoiceId":123}',
)
})

describe('matching on different param types', () => {
const testCases = [
{
Expand Down
Loading
Loading