how to make notFoundComponent render outside the outlets.
I've defined a defaultNotFoundComponent as the createRouter config. The router is then passed to the router props of the RouterProvider component which is rendered in the react root. I hope that the defaultNotFoundComponent to render when a url is not matched and I think it should be rendered full-size rather than just in the outlet.
I have a series of nav links in the
__root.tsx and an Outlet component. The ideal behavior I expect is that when "https://www.domain.com/exits" is visited, the navs and the outlet is rendered correctly, and when "https://www.domain.com/does-not-exists" is visited, the navs and the outlet (as well as anything else in the __root.tsx ) are not rendered but to show only the defaultNotFoundComponent I defined.
Was there anything I did wrong? Or it's just I can't achieve that?
(To illustrate, I just want the error page to be rendered the way like the errorElement in react-router-dom, where you can define an errorElement in the root router and it's rendered full-screen, and you can also defined an errorElement in the children routers and the error element is partially rendered without breaking the ui in the parent route. I'm quit satisfied with the partial rendering of the notFoundElements of Tanstack Router but I just cant figure it out how to do a full rendering of a 404 page.)
Thank you very much guys.1 Reply
tame-yellow•10mo ago
can you please create a minimal complete example and put this into a GitHub issue?