feat: add 404 route

README.md

@@ -8,6 +8,7 @@ Some rules you need to know:
 - you can export `'Component'、'ErrorBoundary'、'loader'、'action', 'handle'、'shouldRevalidate'、'errorElement'、'id'` in every route file
 - A file starts with a `_` character or wraps by `[]` will be `dynamic route`.
 - Every file named `layout` in directory will become layout route.
+- The file named `404` in root directory will become `No Match(404) Route`.
 
 ### Installation
 ```js

__tests__/routes.spec.ts

@@ -22,7 +22,7 @@ test('Nested layout should not be imported synchronously', async () => {
 
 test('Should not create Route for excluded directory', async () => {
   await page.click('.excluded-components')
-  expect(await page.textContent('.route-error')).toContain('404 Not Found')
+  expect(await page.textContent('.content')).toContain('404 Not Found')
   await page.goBack()
 })
 
@@ -73,21 +73,24 @@ test('index', async () => {
 
 test('/utils (exclude)', async () => {
   await page.click('.utils')
-  expect(await page.textContent('.route-error')).toContain('404 Not Found')
+  expect(await page.textContent('.content')).toContain('404 Not Found')
 
   await page.goBack()
   expect(await page.textContent('.layout')).toBe('layout')
   expect(await page.textContent('.content')).toBe('index')
 })
 
+test('/error', async () => {
+  await page.click('.error')
+  expect(await page.textContent('.route-error')).toContain('Route Error')
+
+  await page.goBack()
+})
+
 if (!process.env.VITEST_BUILD) {
   test('HMR', async () => {
     await page.click('.about')
-    expect(await page.textContent('.route-error')).toContain('404 Not Found')
-
-    await page.goBack()
-    await page.click('.about')
-    expect(await page.textContent('.route-error')).toContain('404 Not Found')
+    expect(await page.textContent('.content')).toContain('404 Not Found')
 
     const aboutFile = path.join(process.cwd(), 'example/src/pages/about.jsx')
     fs.writeFileSync(aboutFile, '')

example/src/pages/404.tsx

@@ -0,0 +1,5 @@
+export function Component() {
+	return (
+		<div className="content">404 Not Found</div>
+	)
+}

example/src/pages/error.tsx

@@ -0,0 +1,3 @@
+export function Component() {
+	throw new Error('route-error')
+}

example/src/pages/layout.tsx

@@ -14,7 +14,7 @@ export function action() {}
 
 export function ErrorBoundary() {
   return (
-    <div className="route-error">404 Not Found</div>
+    <div className="route-error">Route Error</div>
   )
 }
 
@@ -38,6 +38,7 @@ export function Component() {
         <Link className="bar-dynamic" to="/bar/dynamic">/bar/:dynamic</Link>{' '}
         <Link className="hyphen-name" to="/hyphen-name">/hyphen-name</Link>{' '}
         <Link className="excluded-components" to="/components">/excluded/components</Link>
+        <Link className="error" to="/error">/error</Link>
       </div>
       <div className="layout">layout</div>
       <div className="layout-loader-data">{data.root}</div>

index.ts

@@ -139,13 +139,18 @@ function VitePluginReactRouter(opts: Options = {}): PluginOption {
           } else {
             const route = await getElement(filePath, content, routePath, sync?.(routePath)) as RouteObject
 
-            if (segment === 'index') {
-              route.index = true
+            if (isRoot && segment === '404') {
+              route.path = '*'
+              stackRoutes.push(route)
             } else {
-              route.path = toDynamic(segment)
-            }
+              if (segment === 'index') {
+                route.index = true
+              } else {
+                route.path = toDynamic(segment)
+              }
 
-            workRoute.children?.push(route)
+              workRoute.children?.push(route)
+            }
           }
         } else {
           emptyFiles.add(filePath)