plain-purple

Not found routes with CLI?

It seems like the docs don't mention how not founds work using the CLI? Any suggestions? The doc reference the non-CLI method

const routeTree = rootRoute.addChildren([
  rootRoute,
  blogRoute.addChildren([blogIndexRoute]),
])

const notFoundRoute = new NotFoundRoute({
  getParentRoute: () => rootRoute,
  component: () => <h1>Page not found</h1>,
})

const router = new Router({
  routeTree,
  notFoundRoute,
})

const routeTree = rootRoute.addChildren([
  rootRoute,
  blogRoute.addChildren([blogIndexRoute]),
])

const notFoundRoute = new NotFoundRoute({
  getParentRoute: () => rootRoute,
  component: () => <h1>Page not found</h1>,
})

const router = new Router({
  routeTree,
  notFoundRoute,
})

https://tanstack.com/router/v1/docs/guide/route-paths#404--notfoundroutes

Route Paths | TanStack Router Docs

Route paths are used to match parts of a URL's pathname to a route. At their core, route paths are just strings and can be defined using a variety of syntaxes, each with different behaviors. Before we get into those behaviors, let's look at a few important cross-cutting path concerns. Leading and Trailing Slashes

11 Replies

rare-sapphire•2y ago

The CLI and vite plugin generate a route tree, so the usage is no different than what you have here. Just import the route tree, create your not found route and pass them both to your router

fascinating-indigo•2y ago

I think what's missing in the documentation is where to point the getParentRoute on the notFoundRoute. Something like this should do it, right? Or will this create circular deps? I'm a bit lost on the import structure at the moment 😅

import { routeTree } from "./route-tree.gen"
import { Route as rootRoute } from "./routes/__root"

const router = new Router({
  routeTree,
  notFoundRoute: new NotFoundRoute({
    getParentRoute: () => rootRoute,
    component: () => <div>404</div>,
  }),
})

import { routeTree } from "./route-tree.gen"
import { Route as rootRoute } from "./routes/__root"

const router = new Router({
  routeTree,
  notFoundRoute: new NotFoundRoute({
    getParentRoute: () => rootRoute,
    component: () => <div>404</div>,
  }),
})

plain-purpleOP•2y ago

Yeah this seems like the right way of going about it. Seems to work on my end

rare-sapphire•2y ago

The docs have getParentRoute: () => rootRoute, everywhere for not found routes AFAIK. If you found somewhere in the docs it could be clearer, let me know

fascinating-indigo•2y ago

Yeah, but for me there was a mental disconnect when doing that with file based routing. Not sure why, but I just didn't realize I could directly import routes with file based routing as well

rare-sapphire•2y ago

Can you elaborate? Ohhhh I see You mean importing the __root.tsx file

fascinating-indigo•2y ago

Yeah, exactly

rare-sapphire•2y ago

Yep. It might take some unlearning, but TSR's file-based routing is really just a thin facade on real files, real imports, and a tiny bit of code gen Everyone is so used to file-based routing being a black box. It's lame.

fascinating-indigo•2y ago

Yeah, I really like the approach you've taken here. But it sure does take some getting used to

rare-sapphire•2y ago

🙂

plain-purpleOP•2y ago

same! haha. thanks for all your help tanner and jakob

Gaming

Programming

Not found routes with CLI?

Did you find this page helpful?