router icon indicating copy to clipboard operation
router copied to clipboard

File Based Router - Routes with more than one Suffix + Suffix on Param wrong parameter name.

Open mfrancis107 opened this issue 2 years ago • 0 comments

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

mfrancis107 avatar Jan 12 '24 22:01 mfrancis107