Skip to content

Commit e1e994d

Browse files
petercmtimdorr
authored andcommitted
Added a migration section on PatternUtils: matchPath and path-to-regexp (remix-run#5340)
1 parent fa7315e commit e1e994d

File tree

1 file changed

+27
-0
lines changed

1 file changed

+27
-0
lines changed

packages/react-router/docs/guides/migrating.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ React Router v4 is a complete rewrite, so there is not a simple migration path.
1010
* [on* properties](#on-properties)
1111
* [Switch](#switch)
1212
* [Redirect](#redirect)
13+
* [PatternUtils](#patternutils)
1314

1415
## The Router
1516

@@ -169,3 +170,29 @@ In v4, you can achieve the same functionality using `<Redirect>`.
169170
</Switch>
170171

171172
```
173+
174+
## PatternUtils
175+
176+
### matchPattern(pattern, pathname)
177+
In v3, you could use the same matching code used internally to check if a path matched a pattern. In v4 this has been replaced by [matchPath](/packages/react-router/docs/api/matchPath.md) which is powered by the [path-to-regexp](https://github.com/pillarjs/path-to-regexp) library.
178+
179+
### formatPattern(pattern, params)
180+
In v3, you could use PatternUtils.formatPattern to generate a valid path from a path pattern (perhaps in a constant or in your central routing config) and an object containing the names parameters:
181+
182+
```js
183+
// v3
184+
const THING_PATH = '/thing/:id';
185+
186+
<Link to={PatternUtils.formatPattern(THING_PATH, {id: 1})}>A thing</Link>
187+
```
188+
189+
In v4, you can achieve the same functionality using the [compile](https://github.com/pillarjs/path-to-regexp#compile-reverse-path-to-regexp) function in [path-to-regexp](https://github.com/pillarjs/path-to-regexp).
190+
191+
```js
192+
// v4
193+
const THING_PATH = '/thing/:id';
194+
195+
const thingPath = pathToRegexp.compile(THING_PATH);
196+
197+
<Link to={thingPath({id: 1})}>A thing</Link>
198+
```

0 commit comments

Comments
 (0)