Skip to content

Commit 11f3747

Browse files
WoLewickisatya164
authored andcommitted
feat: add intialRouteName to deep-linking guide
1 parent b48384f commit 11f3747

File tree

1 file changed

+42
-5
lines changed

1 file changed

+42
-5
lines changed

website/versioned_docs/version-5.x/deep-linking.md

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,7 @@ For example, the path `/rooms/chat?user=jane` will be translated to a state obje
3939
The [`useLinking`](use-linking.html) hook makes it easier to handle incoming links:
4040

4141
```js
42-
import {
43-
NavigationContainer,
44-
useLinking,
45-
} from '@react-navigation/native';
42+
import { NavigationContainer, useLinking } from '@react-navigation/native';
4643

4744
function App() {
4845
const ref = React.useRef();
@@ -168,7 +165,7 @@ Here we have a stack navigator in root, and inside the `Home` screen of the root
168165
}
169166
```
170167

171-
In this config, we specify that the `Profile` screen should be resolved for the `users/:id` pattern and it's nested inside the `Home` screen. This will result in the following state object:
168+
In this config, we specify that the `Profile` screen should be resolved for the `users/:id` pattern and it's nested inside the `Home` screen. Then parsing `users/jane` will result in the following state object:
172169

173170
```js
174171
const state = {
@@ -188,6 +185,46 @@ const state = {
188185
};
189186
```
190187

188+
Sometimes we want to ensure that a certain screen will always be present for the navigator in the state object. We can achieve it by specifying the `initialRouteName` property for that navigator in the config. For the above example, if we want the `Notifications` screen to be the initial route in `Home` tab navigator, we should specify such config (`Notifications` screen needn't be mentioned in `screens` property):
189+
190+
```js
191+
{
192+
Home: {
193+
initialRouteName: 'Notifications',
194+
screens: {
195+
Profile: 'users/:id',
196+
Notifications: 'notify/:user',
197+
},
198+
},
199+
};
200+
```
201+
202+
Then, the path `/users/42` will resolve to the following state object:
203+
204+
```js
205+
const state = {
206+
routes: [
207+
{
208+
name: 'Home',
209+
state: {
210+
index: 1,
211+
routes: [
212+
{
213+
name: 'Notifications',
214+
},
215+
{
216+
name: 'Profile',
217+
params: { id: 'jane' },
218+
},
219+
],
220+
},
221+
},
222+
],
223+
};
224+
```
225+
226+
Notice that we can't pass any params to the `Notifications` screen if it isn't explicitly mentioned in the URL string, so the screen should implement handling lack of these params with e.g. providing default ones.
227+
191228
For some advanced cases, specifying the mapping may not be sufficient. You can implement your custom parser to address these cases using the `getStateFromPath` option:
192229

193230
```js

0 commit comments

Comments
 (0)