Skip to content

Commit

Permalink
useParams docs.
Browse files Browse the repository at this point in the history
  • Loading branch information
molefrog committed Feb 1, 2024
1 parent 4bba7a8 commit 33ad837
Showing 1 changed file with 19 additions and 1 deletion.
20 changes: 19 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ projects that use wouter: **[Ultra](https://ultrajs.dev/)**,
- [`useLocation` hook: working with the history](#uselocation-working-with-the-history)
- [Additional navigation parameters](#additional-navigation-parameters)
- [Customizing the location hook](#customizing-the-location-hook)
- [`useParams` hook: working with parameters](#useparams-hook-working-with-parameters)
- [`useParams`: extract matched parameters](#useparams-extract-matched-parameters)
- [`useRouter`: accessing the router object](#userouter-accessing-the-router-object)
- [Component API](#component-api)
- [`<Route path={pattern} />`](#route-pathpattern-)
Expand Down Expand Up @@ -281,6 +281,24 @@ const App = () => (

Because these hooks have return values similar to `useState`, it is easy and fun to build your own location hooks: `useCrossTabLocation`, `useLocalStorage`, `useMicroFrontendLocation` and whatever routing logic you want to support in the app. Give it a try!

### `useParams`: extracting matched parameters

This hook allows you to access the parameters exposed through [matching dynamic segments](#matching-dynamic-segments). Internally, we simply wrap your components with a context provider allowing you to access this data anywhere within the `Route` component.

This allows you to avoid "prop drilling" when dealing with deeply nested components within the route. **Note:** `useParams` will only extract parameters from the closest parent route.

```js
import { Route, useParams } from "wouter";

const User = () => {
const params = useParams();

params.id; // "1"
};

<Route path="/user/:id" component={User}> />
```

### `useRouter`: accessing the router object

If you're building advanced integration, for example custom location hook, you might want to get
Expand Down

0 comments on commit 33ad837

Please sign in to comment.