useRoutePath(): Get the path for the current route by default

docs/docs/router.md

@@ -478,14 +478,24 @@ Example output:
 
 ## useRoutePath
 
-This is a convenience hook for when you only want the path for a single route.
+Use this hook when you only want the path for a single route. By default it
+will give you the path for the current route
 ```jsx
-const aboutPath = useRoutePath('about') // returns "/about"
+// returns "/about" if you're currently on https://example.org/about
+const aboutPath = useRoutePath() 
 ```
-is the same as
+
+You can also pass in the name of a route and get the path for that route
+```jsx
+// returns "/about"
+const aboutPath = useRoutePath('about')
+```
+
+Note that the above is the same as
 ```jsx
 const routePaths = useRoutePaths()
-const aboutPath = routePaths.about // Also returns "/about"
+// returns "/about"
+const aboutPath = routePaths.about
 ```
 
 ## useRouteName

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

@@ -2,7 +2,9 @@
 import React from 'react'
 
 import { render } from '@testing-library/react'
+import { act } from 'react-dom/test-utils'
 
+import { navigate } from '../history'
 import { Route, Router } from '../router'
 import { Set } from '../Set'
 import { useRoutePaths, useRoutePath } from '../useRoutePaths'
@@ -27,17 +29,25 @@ test('useRoutePaths and useRoutePath', async () => {
     children: React.ReactNode
   }
 
-  const Layout = ({ children }: LayoutProps) => <>{children}</>
+  const Layout = ({ children }: LayoutProps) => {
+    // No name means current route
+    const routePath = useRoutePath()
+
+    return (
+      <>
+        <h1>Current route path: &quot;{routePath}&quot;</h1>
+        {children}
+      </>
+    )
+  }
 
   const Page = () => <h1>Page</h1>
 
   const TestRouter = () => (
     <Router>
-      <Route path="/" page={HomePage} name="home" />
       <Set wrap={Layout}>
+        <Route path="/" page={HomePage} name="home" />
         <Route path="/one" page={Page} name="one" />
-      </Set>
-      <Set wrap={Layout}>
         <Route path="/two/{id:Int}" page={Page} name="two" />
       </Set>
     </Router>
@@ -48,4 +58,11 @@ test('useRoutePaths and useRoutePath', async () => {
   await screen.findByText('Home Page')
   await screen.findByText(/^My path is\s+\/$/)
   await screen.findByText(/^All paths:\s+\/,\/one,\/two\/\{id:Int\}$/)
+  await screen.findByText('Current route path: "/"')
+
+  act(() => navigate('/one'))
+  await screen.findByText('Current route path: "/one"')
+
+  act(() => navigate('/two/123'))
+  await screen.findByText('Current route path: "/two/{id:Int}"')
 })

packages/router/src/useRoutePaths.ts

@@ -1,4 +1,5 @@
 import { useRouterState } from './router-context'
+import { useRouteName } from './useRouteName'
 import type { GeneratedRoutesMap } from './util'
 
 import type { AvailableRoutes } from '.'
@@ -20,8 +21,15 @@ export function useRoutePaths() {
   return routePaths
 }
 
-export function useRoutePath(routeName: keyof AvailableRoutes) {
+export function useRoutePath(routeName?: keyof AvailableRoutes) {
+  const currentRouteName = useRouteName()
   const routePaths = useRoutePaths()
 
-  return routePaths[routeName]
+  const name = routeName || currentRouteName
+
+  if (!name) {
+    return undefined
+  }
+
+  return routePaths[name]
 }