Blog>
Snippets

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.