TanStackT
TanStack•14mo ago•
6 replies
verbal-lime

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 />;
    },
});
image.png
Was this page helpful?