TanStackT
TanStack•14mo ago•
2 replies
wispy-olive

ELECTRON DYNAMIC ROUTES

Having massive dramas getting dynamic routes in electron to work for me. Any help would be great, It's successfully getting Id and triggering click. I've tried various patterns from docs to no success.

The paths I have are

src\pages\vehicles$vehicleId.tsx

src\pages\vehicles\index.tsx

When I click a vehicle from the list it triggers the event and passes the ID even if logged in createRoute but it doesn't route me anywhere. Nothing happens except my breadcrumb is updated with the vehicle ID as expected.

export const VehiclesRoute = createRoute({
    getParentRoute: () => RootRoute,
    path: "/vehicles",
    component: VehiclePage,
});

// Vehicle detail route
export const VehicleDetailRoute = createRoute({
    getParentRoute: () => VehiclesRoute,
    path: "$vehicleId",
    component: VehicleDetailPage,
    params: {
        parse: (params: { vehicleId: string }) => {
            return params;
        }
    }
});



export const rootTree = RootRoute.addChildren([
    HomeRoute,
    VehiclesRoute.addChildren([
        VehicleDetailRoute,
    ]),

here is my click handler

    const handleVehicleClick = (vehicle: Vehicle) => {
        // Update to use TanStack Router navigation
        navigate({ 
            to: '/vehicles/$vehicleId',
            params: { vehicleId: vehicle.id.toString() }
        });
        useLayoutStore.getState().setDynamicSegment(
            'id',
            `${vehicle.make} ${vehicle.model} (${vehicle.registrationNumber})`
        );
    };


The page I'm trying to route on click

export default function VehicleDetailPage() {
  const { vehicleId } = useParams({ from: '/vehicles/$vehicleId' });
Was this page helpful?