Skip to content
Open
Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
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