feat: add object type guard middleware

README.md

@@ -89,7 +89,7 @@ import {
 } from 'react-router-guarded-routes'
 
 const logGuard: GuardMiddleware = (to, from, next) => {
-  console.log(to) // { location, matches }
+  console.log(to) // { location, matches, route }
   console.log(from)
   next() // call next function to show the route element
   // it accepts the same parameters as navigate (useNavigate()) and behaves consistently.
@@ -138,7 +138,22 @@ const fooGuard: GuardMiddleware = (to, from, next) => {
   next()
 }
 
-const guards = [logGuard]
+// you can use object to determine whether you need to register middleware
+const barGuard: GuardMiddleware = {
+  handler: (to, from, next) => {
+    console.log('bar')
+    next()
+  },
+  register: (to, from) => {
+    // only matched with `/bar` can be executed.å
+    if (to.location.pathname.startsWith('/bar')) {
+      return true
+    }
+    return false
+  },
+}
+
+const guards = [logGuard, barGuard]
 const fooGuards = [fooGuard]
 
 export default function App() {
@@ -238,11 +253,22 @@ export interface FromGuardRouteOptions {
   matches: GuardedRouteMatch[]
 }
 
-export type GuardMiddleware<T = any> = (
+export type GuardMiddlewareFunction<T = any> = (
   to: ToGuardRouteOptions,
   from: FromGuardRouteOptions,
   next: NextFunction<T>
 ) => Promise<void> | void
+
+export type GuardMiddlewareObject<T = any> = {
+  handler: GuardMiddlewareFunction<T>
+  register?: (
+    to: ToGuardRouteOptions,
+    from: FromGuardRouteOptions
+  ) => Promise<boolean> | boolean
+}
+export type GuardMiddleware<T = any> =
+  | GuardMiddlewareFunction<T>
+  | GuardMiddlewareObject<T>
 ```
 
 ### Components

__tests__/guard-config-provider.test.tsx

@@ -215,7 +215,7 @@ describe('<GuardConfigProvider />', () => {
 
         const button = renderer.root.findByType('button')
 
-        TestRenderer.act(() => {
+        await TestRenderer.act(() => {
           button.props.onClick()
         })
 

__tests__/guard-provider.test.tsx

@@ -1,4 +1,4 @@
-import { MemoryRouter, Outlet } from 'react-router'
+import { MemoryRouter, Outlet, useNavigate } from 'react-router'
 import type { ReactTestRenderer } from 'react-test-renderer'
 import TestRenderer from 'react-test-renderer'
 import {
@@ -154,6 +154,83 @@ describe('<GuardProvider />', () => {
     `)
   })
 
+  it('should register a guard middleware when matched a route', async () => {
+    function Home() {
+      const navigate = useNavigate()
+      return (
+        <div>
+          home
+          <button onClick={() => navigate('/about')}>Click</button>
+        </div>
+      )
+    }
+    let renderer!: ReactTestRenderer
+
+    await TestRenderer.act(async () => {
+      const routes: GuardedRouteObject[] = [
+        {
+          element: (
+            <GuardProvider
+              guards={[
+                {
+                  handler: () => {},
+                  register(to) {
+                    if (to.location.pathname === '/about') {
+                      return true
+                    }
+                    return false
+                  },
+                },
+              ]}
+              fallback={<div>loading...</div>}
+            >
+              <Outlet />
+            </GuardProvider>
+          ),
+          children: [
+            {
+              path: 'home',
+              element: <Home />,
+            },
+            {
+              path: 'about',
+              element: <h1>about</h1>,
+            },
+          ],
+        },
+      ]
+
+      await TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={['/home']}>
+            <RoutesRenderer routes={routes} />
+          </MemoryRouter>
+        )
+      })
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <div>
+          home
+          <button
+            onClick={[Function]}
+          >
+            Click
+          </button>
+        </div>
+      `)
+    })
+    await TestRenderer.act(async () => {
+      const button = renderer.root.findByType('button')
+      await TestRenderer.act(() => {
+        button.props.onClick()
+      })
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+    <div>
+      loading...
+    </div>
+  `)
+    })
+  })
+
   it('should include all guard middleware when there are nested providers', async () => {
     await TestRenderer.act(async () => {
       const routes: GuardedRouteObject[] = [

__tests__/useGuardedRoutes.test.tsx

@@ -117,6 +117,37 @@ describe('useGuardedRoutes', () => {
           </div>
         `)
       })
+
+      it('pass an object as a middleware and provide a register handler', async () => {
+        await TestRenderer.act(async () => {
+          const routes: GuardedRouteObject[] = [
+            {
+              path: 'home',
+              element: <h1>home</h1>,
+              guards: [
+                {
+                  handler: () => {},
+                  register: () => false,
+                },
+              ],
+            },
+          ]
+
+          let renderer!: ReactTestRenderer
+          await TestRenderer.act(() => {
+            renderer = TestRenderer.create(
+              <MemoryRouter initialEntries={['/home']}>
+                <RoutesRenderer routes={routes} />
+              </MemoryRouter>
+            )
+          })
+          expect(renderer.toJSON()).toMatchInlineSnapshot(`
+            <h1>
+              home
+            </h1>
+          `)
+        })
+      })
     })
 
     describe('when a guard has called the `next()` function', () => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router-guarded-routes",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "a guard middleware for react-router v6",
   "keywords": [
     "react",

src/internal/guard.tsx

@@ -15,14 +15,14 @@ import {
 import {
   FromGuardRouteOptions,
   GuardedRouteObject,
-  GuardMiddleware,
+  GuardMiddlewareFunction,
   NextFunction,
   ToGuardRouteOptions,
 } from '../type'
 import { useGuardConfigContext } from './useGuardConfigContext'
 import { useGuardContext } from './useGuardContext'
 import { usePrevious } from './usePrevious'
-import { isNumber, isPromise } from './utils'
+import { isFunction, isNumber, isPromise } from './utils'
 
 export interface GuardProps {
   route: GuardedRouteObject
@@ -71,13 +71,15 @@ export const Guard: React.FC<GuardProps> = (props) => {
     () => ({
       location: location.to as Location,
       matches,
+      route: matches[matches.length - 1]?.route,
     }),
     [location.to, matches]
   )
   const fromGuardRouteOptions: FromGuardRouteOptions = useMemo(
     () => ({
       location: location.from,
       matches: prevMatches || [],
+      route: prevMatches ? prevMatches[prevMatches.length - 1]?.route : null,
     }),
     [location.from, prevMatches]
   )
@@ -92,7 +94,7 @@ export const Guard: React.FC<GuardProps> = (props) => {
   )
 
   const runGuard = useCallback(
-    (guard: GuardMiddleware, prevCtxValue: any) => {
+    (guard: GuardMiddlewareFunction, prevCtxValue: any) => {
       return new Promise<GuardedResult<any>>((resolve, reject) => {
         let ctxValue: any
         let called = false
@@ -140,15 +142,11 @@ export const Guard: React.FC<GuardProps> = (props) => {
           ctxValue = value
           return next()
         }
+        async function handleGuard() {
+          await guard(toGuardRouteOptions, fromGuardRouteOptions, next)
+        }
         try {
-          const guardResult = guard(
-            toGuardRouteOptions,
-            fromGuardRouteOptions,
-            next
-          )
-          if (isPromise(guardResult)) {
-            guardResult.catch((error) => reject(error))
-          }
+          handleGuard()
         } catch (error) {
           reject(error)
         }
@@ -160,7 +158,23 @@ export const Guard: React.FC<GuardProps> = (props) => {
   const runGuards = useCallback(async () => {
     let ctxValue: any
     for (const guard of guards) {
-      const result = await runGuard(guard, ctxValue)
+      let registered = true
+      let guardHandle: GuardMiddlewareFunction
+      if (isFunction(guard)) {
+        guardHandle = guard
+      } else {
+        guardHandle = guard.handler
+        if (guard.register) {
+          registered = await guard.register(
+            toGuardRouteOptions,
+            fromGuardRouteOptions
+          )
+        }
+      }
+      if (!registered) {
+        continue
+      }
+      const result = await runGuard(guardHandle, ctxValue)
       ctxValue = result.value
       if (result.type === ResolvedStatus.NEXT) {
         continue
@@ -173,7 +187,7 @@ export const Guard: React.FC<GuardProps> = (props) => {
       }
     }
     setValidated(true)
-  }, [guards, navigate, runGuard])
+  }, [fromGuardRouteOptions, guards, navigate, runGuard, toGuardRouteOptions])
 
   useEffect(() => {
     function validate() {

src/internal/utils.ts

@@ -16,3 +16,7 @@ export function isPromise<T = any>(value: any): value is Promise<T> {
 export function isNumber(value: any): value is number {
   return typeof value === 'number'
 }
+
+export function isFunction(value: any): value is (...args: any[]) => any {
+  return typeof value === 'function'
+}

src/type.ts

@@ -30,17 +30,32 @@ export interface GuardedRouteMatch<ParamKey extends string = string>
 export interface ToGuardRouteOptions {
   location: Location
   matches: GuardedRouteMatch[]
+  route: GuardedRouteObject
 }
 
 export interface FromGuardRouteOptions
   extends ReplacePick<
     ToGuardRouteOptions,
-    ['location'],
-    [ToGuardRouteOptions['location'] | null]
+    ['location', 'route'],
+    [
+      ToGuardRouteOptions['location'] | null,
+      ToGuardRouteOptions['route'] | null
+    ]
   > {}
 
-export type GuardMiddleware<T = any> = (
+export type GuardMiddlewareFunction<T = any> = (
   to: ToGuardRouteOptions,
   from: FromGuardRouteOptions,
   next: NextFunction<T>
 ) => Promise<void> | void
+
+export type GuardMiddlewareObject<T = any> = {
+  handler: GuardMiddlewareFunction<T>
+  register?: (
+    to: ToGuardRouteOptions,
+    from: FromGuardRouteOptions
+  ) => Promise<boolean> | boolean
+}
+export type GuardMiddleware<T = any> =
+  | GuardMiddlewareFunction<T>
+  | GuardMiddlewareObject<T>