File Based Router - Routes with more than one Suffix + Suffix on Param wrong parameter name.
Describe the bug
Example file path routes/address-book_.$addressBookId_.edit.tsx
I would expect the parameter to be addressBookId and the type system agrees but at runtime the parameter is addressBookId_ with a trailing underscore.
import { FileRoute } from "@tanstack/react-router";
import { api } from "@/api";
import { AddressBookEntryForm } from "@/forms/AddressBookEntryForm";
export const Route = new FileRoute(
"/address-book/$addressBookId_/edit",
).createRoute({
component: () => <EditAddressBookRecord />,
loader: ({
context: { queryClient },
params,
}: {
context: any;
params: any;
}) => {
return queryClient.ensureQueryData({
queryKey: ["addressBook", params.addressBookId_],
networkMode: "always",
gcTime: 0,
queryFn: () => api("AddressBook/:id").get(params.addressBookId_),
});
},
});
function EditAddressBookRecord() {
const addressBook = Route.useLoaderData();
const params = Route.useParams();
return (
<div>
<h1>Edit Address Records</h1>
<AddressBookEntryForm
values={addressBook.addressBook}
id={params.addressBookId}
/>
</div>
);
}
Other files in the project have the paths
routes/address-book_.$addressBookId_.add-extra-details.tsx routes/address-book_.$addressBookId_.extra-details.$extradDetailsId.edit.tsx routes/address-book_.$addressBookId_.edit.tsx routes/address-book_.$addressBookId.extra-details.$extradDetailsId.view.tsx routes/address-book_.$addressBookId.tsx routes/address-book_.create.tsx routes/address-book.tsx
Your Example Website or App
https://stackblitz.com/edit/tanstack-router-8tx6ze?file=src%2Froutes%2Fposts_.%24postId_.view.tsx
Steps to Reproduce the Bug or Issue
Go to route /posts/1/view
The postId is undefined
Expected behavior
In the stack blitz example I'd expect the postId to be defined.
Screenshots or Videos
No response
Platform
- OS: [e.g. macOS, Windows, Linux]
- Browser: [e.g. Chrome, Safari, Firefox]
- Version: [e.g. 91.1]
Additional context
No response