exotic-emerald

How to navigate to root path in splat route without TS complaining?

I have a route _authenticated.my-files.$.tsx which I want to catch /my-files, /my-files/folder, /my-files/any/folder-depth, and this works, however, when I go to /my-files/this/folder/does/not/exist, I make sure I throw the result of notFound() inside of the loader function of the Route which calls the notFound handler, and in this handler I want to return the user to the root path of the splat route which is /my-files, but I can't seem to do that without TS complaining. If I try to navigate the user to /my-files/$ which is what TS want me to do, then the URL doesn't change. Will I have to split my route into a route only for /my-files and then a catch all route for everything under /my-files?

export const Route = createFileRoute("/_authenticated/my-files/$")({
    component: RouteComponent,
    validateSearch: zodValidator(searchParamsSchema),
    search: {
        middlewares: [stripSearchParams(defaultSearchParams)],
    },
    pendingMinMs: 0,
    loaderDeps(opts) {
        return [opts.search];
    },
    loader(ctx) {
        const path = ctx.params._splat;
        return ctx.context.queryClient.ensureQueryData(
            getQueryOptions({ path: path, search: ctx.deps[0] }),
        );
    },
    notFoundComponent() {
        return <Navigate to="/my-files" replace />;
    },
});

export const Route = createFileRoute("/_authenticated/my-files/$")({
    component: RouteComponent,
    validateSearch: zodValidator(searchParamsSchema),
    search: {
        middlewares: [stripSearchParams(defaultSearchParams)],
    },
    pendingMinMs: 0,
    loaderDeps(opts) {
        return [opts.search];
    },
    loader(ctx) {
        const path = ctx.params._splat;
        return ctx.context.queryClient.ensureQueryData(
            getQueryOptions({ path: path, search: ctx.deps[0] }),
        );
    },
    notFoundComponent() {
        return <Navigate to="/my-files" replace />;
    },
});

6 Replies

vicious-gold•9mo ago

please provide a minimal complete example

exotic-emeraldOP•9mo ago

I also can't seem to have a Link to any page under /my-files, well, I think it's only TS that complains but it actually works. in this example, it works as I expect, but with TS complaining. Nothing that // @ts-expect-error can't handle 😄 https://stackblitz.com/edit/github-otbnuukl?file=src%2Froutes%2F__root.tsx

exotic-emeraldOP•9mo ago

I think the type would have to be expanded to something like /my-files${string} because it's a catch all parameter

vicious-gold•9mo ago

I guess you need to add an index route under /my-files ?

exotic-emeraldOP•9mo ago

That resolved the error for when linking to "/my-files", but linking to "/my-files/foo" gives an error. I wonder if it's maybe an overlooked TS-issue? https://stackblitz.com/edit/github-otbnuukl?file=src%2Froutes%2Fmy-files%2Findex.tsx

Gaming

Programming

How to navigate to root path in splat route without TS complaining?

Did you find this page helpful?