Added match component

dev/App.tsx

@@ -16,7 +16,7 @@ const Root = () => {
   const [searchParams, setSearchParams] = useSearchParams()
   const location = useLocation()
   const navigate = useNavigate()
-  const match = useMatch(() => '/app/:id ')
+  const match = useMatch(() => '/app/:id?')
   const params = useParams()
 
   createEffect(() => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-navigator",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "Solid Navigator is a library that is inspired by vue router and solid router.",
   "license": "MIT",
   "author": "SupertigerDev",

src/Outlet.tsx

@@ -31,9 +31,9 @@ export const Outlet = (props: { children?: string; name?: string }) => {
     return component
   })
 
-  const MemodComponent = createMemo(() => {
+  const MemoComponent = createMemo(() => {
     return component()()
   })
 
-  return <>{MemodComponent}</>
+  return <>{MemoComponent}</>
 }

src/Route.ts

@@ -1,4 +1,5 @@
-import { JSX, children, mergeProps } from 'solid-js'
+import { Component, JSX, children, createMemo, mergeProps } from 'solid-js'
+import { useRouterContext } from './Router'
 
 export interface RouteObject {
   path: string
@@ -21,3 +22,18 @@ export const Route = (props: Omit<RouteObject, 'children'> & { children?: JSX.El
     },
   }) as unknown as JSX.Element
 }
+
+
+export const matchComponent = (name: () => string) => {
+  const context = useRouterContext()
+  const matched = () => context.matched()
+
+  const component = createMemo(() => {
+    const components = context.matched()?.route.components || context.matched()?.route.mergedComponents || {}
+    return components[name()]
+  })
+
+  return createMemo(() => {
+    return component()()
+  }) as Component
+}

src/index.tsx

@@ -2,7 +2,7 @@ import { NavigateOptions, useNavigate, Navigate, useSearchParams } from './navig
 
 import { Outlet } from './Outlet'
 
-import { Route, RouteObject } from './Route'
+import { Route, RouteObject, matchComponent } from './Route'
 
 import { Router, useLocation, useParams, RouterProps } from './Router'
 
@@ -21,4 +21,5 @@ export {
   Navigate,
   useMatch,
   useSearchParams,
+  matchComponent
 }

src/navigator.ts

@@ -64,3 +64,4 @@ export const useSearchParams = () => {
 
   return [context.location.query, updateQuery] as const
 }
+