feat: handle custom not found error

packages/tuono-router/src/components/Matches.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { useRouter } from '../hooks/useRouter'
 import { useRouterStore } from '../hooks/useRouterStore'
+import NotFound from './NotFound'
 
 export function Matches(): JSX.Element | undefined {
   const matchId = useRouterStore.getState().matches[0]?.id
@@ -26,6 +27,10 @@ const Match = React.memo(function ({ id }: MatchProps) {
 
   const route = router.routesById[location?.pathname]
 
+  if (!route) {
+    return <NotFound />
+  }
+
   if (route.options.hasHandler) {
     console.log('Has rust handler')
   }

packages/tuono-router/src/components/NotFound.tsx

@@ -0,0 +1,18 @@
+import { useRouter } from '../hooks/useRouter'
+import Link from './Link'
+
+export default function NotFound(): JSX.Element {
+  const router = useRouter()
+
+  // Check if exists a custom 404 error page
+  if (router.routesById['/404']) {
+    return router.routesById['/404'].options.component()
+  }
+
+  return (
+    <>
+      <h1>404 Not found</h1>
+      <Link href="/">Return home</Link>
+    </>
+  )
+}

packages/tuono-router/src/router.ts

@@ -1,9 +1,19 @@
-import { trimPath, trimPathRight, trimPathLeft, parsePathname } from './utils'
+import { trimPath, trimPathRight } from './utils'
 import type { Route } from './route'
+import type { ReactNode } from 'react'
+
+type RouteTree = any
 
 interface CreateRouter {
-  routeTree: any
+  routeTree: RouteTree
   basePath?: string
+  options: RouteOptions
+}
+
+interface RouteOptions {
+  component?: ReactNode
+  hasHandler?: boolean
+  routeTree?: RouteTree
 }
 export type RouterType = any
 
@@ -12,13 +22,14 @@ export function createRouter(options: CreateRouterArgs): Router {
 }
 
 export class Router {
-  options: any
+  options?: RouteOptions
   basePath = '/'
   routeTree: any
   history: any
   isServer = typeof document === 'undefined'
-  routesById = {}
-  routesByPath = {}
+  routesById: Record<string, Route> = {}
+  // Not used
+  routesByPath: Record<string, Route> = {}
   flatRoutes: any
 
   constructor(options: CreateRouter) {