fix: react router plugin splat path type

oedotme · Feb 14, 2023 · 5a7ebbb · 5a7ebbb
1 parent d2451dd
commit 5a7ebbb
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/examples/react-router/plugin/src/pages/splat/[...all].tsx b/examples/react-router/plugin/src/pages/splat/[...all].tsx
@@ -0,0 +1,3 @@
+export default function SplatAll() {
+  return <h1>All</h1>
+}
diff --git a/examples/react-router/plugin/src/routes.gen.tsx b/examples/react-router/plugin/src/routes.gen.tsx
@@ -18,11 +18,17 @@ const Authregister = lazy(() => import('./pages/(auth)/register'))
 const Postsiddeep = lazy(() => import('./pages/posts/[id].deep'))
 const Postsid = lazy(() => import('./pages/posts/[id]'))
 const Postsindex = lazy(() => import('./pages/posts/index'))
+const Splatall = lazy(() => import('./pages/splat/[...all]'))
 const Postsidpid = lazy(() => import('./pages/posts/[id]/-[pid]'))
 const App = app || Outlet
 const NoMatch = noMatch || Fragment
 
 const config = [
+  {
+    path: 'splat',
+    id: 'splat',
+    children: [{ id: 'splatall', path: '*', element: <Suspense fallback={null} children={<Splatall />} /> }],
+  },
   {
     path: 'posts',
     id: 'posts',
@@ -62,7 +68,16 @@ const config = [
 export const routes = [...config, { path: '*', element: <NoMatch /> }]
 const router = createBrowserRouter([{ element: <App />, children: routes }])
 
-type Path = '/' | '/about' | '/login' | '/posts' | '/posts/:id' | '/posts/:id/:pid?' | '/posts/:id/deep' | '/register'
+type Path =
+  | `/`
+  | `/about`
+  | `/login`
+  | `/posts`
+  | `/posts/:id`
+  | `/posts/:id/:pid?`
+  | `/posts/:id/deep`
+  | `/register`
+  | `/splat/${string}`
 
 type Params = {
   '/posts/:id/deep': { id: string }

diff --git a/plugins/react-router/src/generate.ts b/plugins/react-router/src/generate.ts
@@ -39,7 +39,10 @@ const generateRoutes = async () => {
 
       modules.push(`const ${capitalize(id)} = ${element}`)
       if (errorElement) modules.push(`const ${capitalize(id)}Error = ${errorElement}`)
-      if (path) paths.push(path.length > 1 ? `/${path}` : path)
+      if (path) {
+        if (path.includes('*')) paths.push('/' + path.replace(/\*/g, '${string}'))
+        else paths.push(path.length > 1 ? `/${path}` : path)
+      }
 
       const param = path.split('/').filter((segment) => segment.startsWith(':'))
       if (param.length) {
@@ -81,7 +84,7 @@ const generateRoutes = async () => {
   }).replace(/"#_|_#"/g, '')
 
   const types =
-    `type Path = "${[...new Set(paths)].sort().join('" | "')}"`.replace(/"/g, "'") +
+    `type Path = "${[...new Set(paths)].sort().join('" | "')}"`.replace(/"/g, '`') +
     '\n\n' +
     `type Params = { ${params.join('; ')} }`