Help with understanding NotFoundRoute and routeTree

Hi folks, new to tanstack router here. I have a basic Vite/React/TS project. I'm having a having a bit of a hard time trying to figure out how to only render a "Not Found" component and subsequently what role the

routeTree

routeTree

plays in this regard. Here's what I mean

Following is my

main.tsx

main.tsx

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;
  }
}
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
    <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;
  }
}
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
    <App />
  </React.StrictMode>
);

Problem is if you look at the screenshot, it's rendering "Not Found" on top of the root component. If I wanted to show a full-on "Not Found" page when a user hits, let's say a "localhost:3000/dummy" route, what changes would I have to make?

I'm assuming I'm missing something fundamental in my routeTree file, which I haven't started adding to anything yet since I just spun up the project. For context though, here's my

routTree

routTree

file and the

_root.tsx

_root.tsx

file

// This file is auto-generated by TanStack Router

// Import Routes

import { Route as rootRoute } from './routes/__root'

// Create/Update Routes

// Populate the FileRoutesByPath interface

declare module '@tanstack/react-router' {
  interface FileRoutesByPath {}
}

// Create and export the route tree

export const routeTree = rootRoute.addChildren([])

// This file is auto-generated by TanStack Router

// Import Routes

import { Route as rootRoute } from './routes/__root'

// Create/Update Routes

// Populate the FileRoutesByPath interface

declare module '@tanstack/react-router' {
  interface FileRoutesByPath {}
}

// Create and export the route tree

export const routeTree = rootRoute.addChildren([])

root.tsx

import { RootRoute, Outlet } from '@tanstack/react-router';
import { TanStackRouterDevtools } from '@tanstack/router-devtools';

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

import { RootRoute, Outlet } from '@tanstack/react-router';
import { TanStackRouterDevtools } from '@tanstack/router-devtools';

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

Some pointers would be really appreciated!

Screenshot_2024-01-24_at_11.54.18_AM.png

TanStack•3y ago•

16 replies

wet-aqua

Help with understanding NotFoundRoute and routeTree

routeTree

routeTree

plays in this regard. Here's what I mean

Following is my

main.tsx

main.tsx

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;
  }
}
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
    <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;
  }
}
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
    <App />
  </React.StrictMode>
);

routTree

routTree

file and the

_root.tsx

_root.tsx

file

// This file is auto-generated by TanStack Router

// Import Routes

import { Route as rootRoute } from './routes/__root'

// Create/Update Routes

// Populate the FileRoutesByPath interface

declare module '@tanstack/react-router' {
  interface FileRoutesByPath {}
}

// Create and export the route tree

export const routeTree = rootRoute.addChildren([])

// This file is auto-generated by TanStack Router

// Import Routes

import { Route as rootRoute } from './routes/__root'

// Create/Update Routes

// Populate the FileRoutesByPath interface

declare module '@tanstack/react-router' {
  interface FileRoutesByPath {}
}

// Create and export the route tree

export const routeTree = rootRoute.addChildren([])

root.tsx

import { RootRoute, Outlet } from '@tanstack/react-router';
import { TanStackRouterDevtools } from '@tanstack/router-devtools';

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

import { RootRoute, Outlet } from '@tanstack/react-router';
import { TanStackRouterDevtools } from '@tanstack/router-devtools';

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

Some pointers would be really appreciated!

Help with understanding NotFoundRoute and routeTree

Help with understanding NotFoundRoute and routeTree

Similar Threads

Similar Threads

Similar Threads