diff --git a/dev/App.tsx b/dev/App.tsx
index 4ecc79c..d548895 100644
--- a/dev/App.tsx
+++ b/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(() => {
diff --git a/package.json b/package.json
index eb0136e..4b59d53 100644
--- a/package.json
+++ b/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",
diff --git a/src/Outlet.tsx b/src/Outlet.tsx
index 28d3fad..aa68cf4 100644
--- a/src/Outlet.tsx
+++ b/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}</>
 }
diff --git a/src/Route.ts b/src/Route.ts
index e5cbe30..d363b88 100644
--- a/src/Route.ts
+++ b/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
+}
diff --git a/src/index.tsx b/src/index.tsx
index a077838..0b07068 100644
--- a/src/index.tsx
+++ b/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
 }
diff --git a/src/navigator.ts b/src/navigator.ts
index c7c0ba2..3db8b9b 100644
--- a/src/navigator.ts
+++ b/src/navigator.ts
@@ -64,3 +64,4 @@ export const useSearchParams = () => {
 
   return [context.location.query, updateQuery] as const
 }
+