diff --git a/docs/docs/router.md b/docs/docs/router.md index fc0ddbda938e..16783e872491 100644 --- a/docs/docs/router.md +++ b/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 diff --git a/packages/router/src/__tests__/useRoutePaths.test.tsx b/packages/router/src/__tests__/useRoutePaths.test.tsx index a456a8bf1e70..f744213f3389 100644 --- a/packages/router/src/__tests__/useRoutePaths.test.tsx +++ b/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 ( + <> +

Current route path: "{routePath}"

+ {children} + + ) + } const Page = () =>

Page

const TestRouter = () => ( - + - - @@ -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}"') }) diff --git a/packages/router/src/useRoutePaths.ts b/packages/router/src/useRoutePaths.ts index e3f269e1270d..3b5a7efd2c90 100644 --- a/packages/router/src/useRoutePaths.ts +++ b/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] }