Skip to content

Commit f56dd53

Browse files
committed
second pass
1 parent d611638 commit f56dd53

File tree

1 file changed

+13
-6
lines changed

1 file changed

+13
-6
lines changed

docs/navigation-key.md

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,27 @@ sidebar_label: Using the navigation key
66

77
The `key` parameter comes up repeatedly across different navigation functions. Let's take a look at a summary of its use cases:
88

9-
### Idempotent navigation with the [`navigate` call](/docs/navigation-actions.html#navigate)
9+
### Usage with the [`navigate`](/docs/navigation-actions.html#navigate) call
1010

11-
`navigate` function accepts an optional `key` parameter which is used as an identifier for the route to navigate to. If you provide the identifier (as for example in `navigate({ routeName: 'someScreen', params: { someParam: 'someValue' }, key: 'someScreen' })`) and user triggers such navigation action multiple times (eg. by pushing a button that calls the navigation action quickly multiple times in a row), the navigation action will be executed only once.
11+
TL;DR: The behavior of `navigate` together with `key` depends on the version of react-navigation you use. In v1, key has to be provided for navigate to behave idempotently. In v2, this is no longer needed.
1212

13-
Without using the key, calling `navigate({ routeName: 'someScreen' })` twice would result in pushing the screen onto the stack two times. Providing the `key` instead results into one push only. The second call to `navigate` finds out that the screen is already present on the stack and instead of pushing a new instance of the same screen, it calls `setParams` on the existing screen. // TODO what if a screen with given key is present "earlier" in the navigation stack? Will it go back?
13+
#### v2 behavior
14+
15+
In v2, if no key is provided, `StackRouter` assumes the user just wants to either jump (along with setting new params) to the route by the given name if it exists in state already or push it if not. If, however, you want to push several instances of the same route, you can do so by providing a unique `key` parameter each time you call `navigate`, or you can use the `push` action available on `StackRouter`. See the related [RFC](https://github.com/react-navigation/rfcs/blob/master/text/0004-less-pushy-navigate.md) for more background.
16+
17+
#### v1 behavior
18+
19+
In v1, `key` parameter is used as an identifier for the route to navigate to. If you provide the identifier (as for example in `navigate({ routeName: 'someScreen', params: { someParam: 'someValue' }, key: 'someScreen' })`) and user triggers such navigation action twice (eg. by pushing a button that calls the navigation action quickly twice in a row), the navigation action will be executed only once. The second call to `navigate` finds out that the route with the key is already present on the stack and instead of pushing a new instance of the same route, it calls `setParams` on the existing one.
20+
21+
Without using the key, calling `navigate({ routeName: 'someScreen' })` twice would result in pushing the route onto the stack two times.
1422

1523
### Usage with [`reset`](/docs/navigation-actions.html#reset)
1624

17-
When resetting, `key` is also optional and can be a string or null. If set, the navigator with the given key will reset. If null, the root navigator will reset.
18-
// TODO how to find navigator key?
25+
When resetting, `key` is also optional and can be a string or null. If set, the navigator with the given key will reset. If null, the root navigator will reset. You can obtain a route's navigator key by calling `this.props.navigation.dangerouslyGetParent().state.key`. Reason why the function is called `dangerouslyGetParent` is to warn developers against overusing it to eg. get parent of parent.
1926

2027
### Usage with [`replace`](/docs/navigation-actions.html#replace)
2128

22-
With replace, key is a required parameter used for identifying the route to be replaced.
29+
With the replace navigation action, key is a required parameter used for identifying the route to be replaced. If you use the helper function `this.props.navigation.replace`, we will automatically substitute the key of the current route.
2330

2431
### Usage with `goBack`
2532

0 commit comments

Comments
 (0)