usePathMatch

packages/router/src/__tests__/usePathMatch.test.tsx

@@ -0,0 +1,113 @@
+import React from 'react'
+
+import * as testingLibraryReact from '@testing-library/react'
+
+import { LocationProvider } from '..'
+import { usePathMatch } from '../usePathMatch'
+
+function createDummyLocation(pathname: string, search = '') {
+  return {
+    pathname,
+    hash: '',
+    host: '',
+    hostname: '',
+    href: '',
+    ancestorOrigins: null,
+    assign: () => null,
+    reload: () => null,
+    replace: () => null,
+    origin: '',
+    port: '',
+    protocol: '',
+    search,
+  }
+}
+
+describe('usePathMatch', () => {
+  let locationPathname = '/dummy-location'
+  let locationSearch = ''
+
+  type CallbackType = Parameters<typeof testingLibraryReact.renderHook>[0]
+  function renderHook(cb: CallbackType) {
+    const mockLocation = createDummyLocation(locationPathname, locationSearch)
+
+    return testingLibraryReact.renderHook(cb, {
+      wrapper: ({ children }) => (
+        <LocationProvider location={mockLocation}>{children}</LocationProvider>
+      ),
+    })
+  }
+
+  function setLocation(pathname: string, search = '') {
+    locationPathname = pathname
+    locationSearch = search
+  }
+
+  afterEach(() => {
+    setLocation('/dummy-location')
+  })
+
+  it('matches on identical url and path', () => {
+    const { result } = renderHook(() => usePathMatch('/about', '/about'))
+
+    expect(result.current).toBeTruthy()
+  })
+
+  it('matches on location', () => {
+    setLocation('/test-path')
+
+    const { result } = renderHook(() => usePathMatch('/test-path'))
+
+    expect(result.current).toBeTruthy()
+  })
+
+  it('matches a path with given param value', () => {
+    const { result } = renderHook(() =>
+      usePathMatch('/posts/uuid-string', '/posts/{id}', {
+        paramValues: { id: 'uuid-string' },
+      })
+    )
+
+    expect(result.current).toBeTruthy()
+  })
+
+  it('matches a path with given param value, using location', () => {
+    setLocation('/posts/uuid-string')
+
+    const { result } = renderHook(() =>
+      usePathMatch('/posts/{id}', { paramValues: { id: 'uuid-string' } })
+    )
+
+    expect(result.current).toBeTruthy()
+  })
+
+  it('matches a path with default param type', () => {
+    const { result } = renderHook(() =>
+      usePathMatch('/posts/123', '/posts/{id}', {
+        paramValues: { id: '123' },
+      })
+    )
+
+    expect(result.current).toBeTruthy()
+  })
+
+  it('matches a path with a specified param type', () => {
+    const { result } = renderHook(() =>
+      usePathMatch('/posts/123', '/posts/{id:Int}', {
+        paramValues: { id: 123 },
+      })
+    )
+
+    expect(result.current).toBeTruthy()
+  })
+
+  it("doesn't match a path with a specified param type with different value", () => {
+    const { result } = renderHook(() =>
+      usePathMatch('/posts/123', '/posts/{id:Int}', {
+        paramValues: { id: '0' },
+      })
+    )
+
+    expect(result.current).toBeFalsy()
+  })
+})

packages/router/src/useMatch.ts

@@ -1,3 +1,4 @@
+import type { LocationContextType } from './location'
 import { useLocation } from './location'
 import { matchPath } from './util'
 import type { FlattenSearchParams } from './util'
@@ -32,7 +33,14 @@ type UseMatchOptions = {
  * const match = useMatch('/product', { matchSubPaths: true })
  */
 export const useMatch = (pathname: string, options?: UseMatchOptions) => {
-  const location = useLocation()
+  return useLocationMatch(useLocation(), pathname, options)
+}
+
+export const useLocationMatch = (
+  location: LocationContextType,
+  pathname: string,
+  options?: UseMatchOptions
+) => {
   if (!location) {
     return { match: false }
   }

packages/router/src/usePathMatch.ts

@@ -0,0 +1,69 @@
+import { useLocation } from './location'
+import { useLocationMatch } from './useMatch'
+
+interface UsePathMatchOptions {
+  paramValues?: Record<string, any>
+}
+
+/**
+ * Will match the current location against the given path, also matching all
+ * supplied param values
+ *
+ * @param path The path as defined in your Routes file
+ * @param options {UsePathMatchOptions}
+ * @param options.paramValues An map of param names and their values
+ */
+export function usePathMatch(
+  path: string,
+  options?: UsePathMatchOptions
+): boolean
+/**
+ * Will match the given url against the given path, also matching all supplied
+ * param values
+ *
+ * @param url The url to match against
+ * @param path The path as defined in your Routes file
+ * @param options {UsePathMatchOptions}
+ * @param options.paramValues An map of param names and their values
+ */
+export function usePathMatch(
+  url: string,
+  path: string,
+  options?: UsePathMatchOptions
+): boolean
+export function usePathMatch(
+  urlOrPath: string,
+  pathOrOptions?: string | UsePathMatchOptions,
+  opts?: UsePathMatchOptions
+): boolean {
+  const location = useLocation()
+
+  const url = typeof pathOrOptions !== 'string' ? location.pathname : urlOrPath
+  const path = typeof pathOrOptions === 'string' ? pathOrOptions : urlOrPath
+  const options = typeof pathOrOptions !== 'string' ? pathOrOptions : opts
+
+  const match = useLocationMatch({ pathname: url }, path)
+
+  if (!match.match) {
+    return false
+  }
+
+  const paramValues = Object.entries(options?.paramValues || {})
+
+  if (paramValues.length > 0) {
+    if (!isMatchWithParams(match) || !match.params) {
+      return false
+    }
+
+    // If paramValues were given, they must all match
+    return paramValues.every(([key, value]) => {
+      return match.params[key] === value
+    })
+  }
+
+  return true
+}
+
+function isMatchWithParams(match: unknown): match is { params: any } {
+  return match !== null && typeof match === 'object' && 'params' in match
+}