Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
JonahPlusPlus committed May 28, 2024
1 parent 3e38ab6 commit 7c3db57
Showing 1 changed file with 25 additions and 0 deletions.
25 changes: 25 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -218,6 +218,12 @@ useRoute("/app*");
// optional wildcards, matches "/orders", "/orders/"
// and "/orders/completed/list"
useRoute("/orders/*?");

// regex for matching complex patterns,
// matches "/hello:123"
useRoute(/[/]([a-z]+):([0-9]+)[/]?/);
// and with named capture groups
useRoute(/[/](?<word>[a-z]+):(?<num>[0-9]+)[/]?/);
```

The second item in the pair `params` is an object with parameters or null if there was no match. For wildcard segments the parameter name is `"*"`:
Expand Down Expand Up @@ -317,6 +323,21 @@ const User = () => {
<Route path="/user/:id" component={User}> />
```

For regex paths, parameters are accessible as indices or through their group name.

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

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

params.id; // "1"
params[0]; // "1"
};

<Route path={/[/]user[/](?<id>[0-9]+)[/]?/} component={User}> />
```

### `useSearch`: query strings

Use this hook to get the current search (query) string value. It will cause your component to re-render only when the string itself and not the full location updates. The search string returned **does not** contain a `?` character.
Expand Down Expand Up @@ -421,6 +442,10 @@ If you call `useLocation()` inside the last route, it will return `/orders` and
</Route>
```

**Note:** The `nest` prop has no effect on regexes passed in.
It will only determine if nested routes will match the rest of path or match against the same path.
To make a strict path regex, use regex techniques like `[/]?$` (this matches an optional end slash and the end of the string).

### `<Link href={path} />`

Link component renders an `<a />` element that, when clicked, performs a navigation.
Expand Down

0 comments on commit 7c3db57

Please sign in to comment.