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 ( + <> +