Skip to content

Commit ae35a27

Browse files
vovkvladtimdorr
authored andcommitted
Updated migrating doc from v2/v3 to v4 (remix-run#6198)
* Updated migrating doc from v2/v3 to v4 Added: - optional parameters - routeParams - query - gone, only unparsed search - getParamNames * Fix some grammar and wording
1 parent 3d233bf commit ae35a27

File tree

1 file changed

+21
-1
lines changed

1 file changed

+21
-1
lines changed

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

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ React Router v4 is a complete rewrite, so there is not a simple migration path.
1010
* [Routes](#routes)
1111
* [Nesting Routes](#nesting-routes)
1212
* [on* properties](#on-properties)
13+
* [Optional Parameters](#optional-parameters)
14+
* [Query Strings](#query-strings)
1315
* [Switch](#switch)
1416
* [Redirect](#redirect)
1517
* [PatternUtils](#patternutils)
@@ -121,6 +123,20 @@ React Router v3 provides `onEnter`, `onUpdate`, and `onLeave` methods. These wer
121123

122124
With v4, you should use the lifecycle methods of the component rendered by a `<Route>`. Instead of `onEnter`, you would use `componentDidMount` or `componentWillMount`. Where you would use `onUpdate`, you can use `componentDidUpdate` or `componentWillUpdate` (or possibly `componentWillReceiveProps`). `onLeave` can be replaced with `componentWillUnmount`.
123125

126+
### Optional Parameters
127+
128+
In v3, parameters were made optional with parentheses: `path="/entity/:entityId(/:parentId)"`
129+
130+
In v4, the syntax is changed to a trailing question mark: `path="/entity/:entityId/:parentId?"`
131+
132+
### Query Strings
133+
134+
In v4, there is no parsing done on query strings. The unparsed query string is available on the `location.search` property.
135+
136+
The [qhistory](https://github.com/pshrmn/qhistory) library can provide this functionality if it is necessary for your application.
137+
138+
Read more regarding intentions for this change and possible solutions in [this issue](https://github.com/ReactTraining/react-router/issues/4410).
139+
124140
### `<Switch>`
125141

126142
In v3, you could specify a number of child routes, and only the first one that matched would be rendered.
@@ -210,7 +226,7 @@ const THING_PATH = '/thing/:id';
210226
<Link to={PatternUtils.formatPattern(THING_PATH, {id: 1})}>A thing</Link>
211227
```
212228

213-
In v4, you can achieve the same functionality using the [compile](https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#compile-reverse-path-to-regexp) function in [`path-to-regexp@^1.7.0`](https://github.com/pillarjs/path-to-regexp/tree/v1.7.0).
229+
In v4, you can achieve the same functionality using the [`compile`](https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#compile-reverse-path-to-regexp) function in [`path-to-regexp@^1.7.0`](https://github.com/pillarjs/path-to-regexp/tree/v1.7.0).
214230

215231
```jsx
216232
// v4
@@ -221,6 +237,10 @@ const thingPath = pathToRegexp.compile(THING_PATH);
221237
<Link to={thingPath({id: 1})}>A thing</Link>
222238
```
223239

240+
### getParamNames
241+
242+
The `getParamNames` functionality can be achieved using the [`parse`](https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#parse) function in [`path-to-regexp@^1.7.0`](https://github.com/pillarjs/path-to-regexp/tree/v1.7.0).
243+
224244
## Link
225245

226246
### `to` property is required

0 commit comments

Comments
 (0)