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' });

TanStack•16mo ago•

2 replies

wispy-olive

ELECTRON DYNAMIC ROUTES

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' });

ELECTRON DYNAMIC ROUTES

Similar Threads

ELECTRON DYNAMIC ROUTES

Similar Threads

Similar Threads

Similar Threads