fix: 🐛 show not found when deployed

jimmy-guzman · Oct 29, 2024 · 5f1dcfa · 5f1dcfa
1 parent 6fa1ce4
commit 5f1dcfa
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/e2e/app.spec.ts b/e2e/app.spec.ts
@@ -6,6 +6,16 @@ test("has title", async ({ page }) => {
   await expect(page).toHaveTitle(/React Starter/);
 });
 
+test("not found", async ({ page }) => {
+  await page.goto("/lost");
+
+  await expect(page).toHaveTitle(/React Starter/);
+
+  await expect(
+    page.getByRole("heading", { name: "Error", level: 1 }),
+  ).toBeInViewport();
+});
+
 test.describe("external links", () => {
   test.beforeEach(async ({ page }) => {
     await page.goto("/");

diff --git a/src/router.tsx b/src/router.tsx
@@ -8,6 +8,7 @@ export const router = createRouter({
   routeTree,
   defaultNotFoundComponent: NotFound,
   defaultErrorComponent: Error,
+  notFoundMode: "root",
 });
 
 declare module "@tanstack/react-router" {

diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
@@ -1,6 +1,8 @@
 import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
 import { lazy, Suspense } from "react";
 
+import { NotFound } from "@/pages/not-found";
+
 const RouterDevTools = import.meta.env.DEV
   ? lazy(async () => {
       return import("@tanstack/router-devtools").then((res) => {
@@ -24,4 +26,7 @@ const Root = () => {
   );
 };
 
-export const Route = createRootRouteWithContext()({ component: Root });
+export const Route = createRootRouteWithContext()({
+  component: Root,
+  notFoundComponent: NotFound,
+});