Basic TanStack Router Setup for 404 Pages

Shows how to set up TanStack Router in a JavaScript application and configure a basic route to handle 404 errors by displaying a custom Not Found page.

import { createBrowserRouter, RouterProvider, Route } from 'react-router-dom';

First, import necessary components from 'react-router-dom'.

function NotFound() { return <div>404 Page Not Found</div>; }

Define a simple 'NotFound' component that will be displayed for unmatched routes.

const router = createBrowserRouter([
  { path: '*', element: <NotFound /> }
]);

Create a router instance using 'createBrowserRouter' and define a route for handling 404 pages using path '*' which matches any path not handled by other routes.

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

Define the main 'App' component that uses 'RouterProvider' to make the router active.