T
TanStack•10mo ago
rare-sapphire

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 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,
    ]),
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})`
        );
    };
    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' });
export default function VehicleDetailPage() {
  const { vehicleId } = useParams({ from: '/vehicles/$vehicleId' });
1 Reply
ratty-blush
ratty-blush•10mo ago
i assume you must use a different history for electron probably memory history

Did you find this page helpful?