genetic-orange

Help with NotFoundRoute overlapping with the root route

👋 - I'm new to Tanstack Router. Having a bit of a trouble where NotFoundRoute is overlapping with the root path and so hitting just the regular "/" route ends up rendering a "Not Found" message. Here's what I mean - I have a very basic routes folder where I have the root route file and one for "docs", as shown in the screenshot. my root route file looks like this __root.tsx

export const Route = new RootRoute({
  component: () => {
    return (
      <>
        hey
        <Outlet />
        <TanStackRouterDevtools position="bottom-right" />
      </>
    );
  },
});

export const Route = new RootRoute({
  component: () => {
    return (
      <>
        hey
        <Outlet />
        <TanStackRouterDevtools position="bottom-right" />
      </>
    );
  },
});

and the docs.tsx file inside /routes is even more basic

export const Route = new FileRoute('/docs').createRoute({
  component: Docs,
});

function Docs() {
  return (
    <div>
      <span>This is the docs page</span>
    </div>
  );
}

export const Route = new FileRoute('/docs').createRoute({
  component: Docs,
});

function Docs() {
  return (
    <div>
      <span>This is the docs page</span>
    </div>
  );
}

And lastly, following is my main.tsx file -

const notFoundRoute = new NotFoundRoute({
  getParentRoute: () => rootRoute,
  component: () => <div>Not found</div>,
});

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

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router;
  }
}

function App() {
  return <RouterProvider router={router} />;
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

const notFoundRoute = new NotFoundRoute({
  getParentRoute: () => rootRoute,
  component: () => <div>Not found</div>,
});

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

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router;
  }
}

function App() {
  return <RouterProvider router={router} />;
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Pretty straightforward, problem is, as mentioned above, anytime I'm hitting the "/" path, it's matching with the option for the "404" route (second screenshot from the devtools) and thus it's rendering "Hey" alongside "Not Found" when I'm hitting the "/" route. Feel like I'm missing something trivial here. Can someone please provide me with some pointers? For reference, this is where I followed it from - https://tanstack.com/router/v1/docs/guide/creating-a-router#not-found-route

1 Reply

genetic-orangeOP•2y ago

looks like what I was missing was an index.tsx file for the root route. Wasn't clear that it's needed for the root route

Gaming

Programming

Help with NotFoundRoute overlapping with the root route

Did you find this page helpful?