[Indonesia] React Navigation — Navigate to Different Nested Stacks

Source: https://github.com/react-navigation/react-navigation/issues/983#issue-220697445

Ingin baca tutorial ini dalam Bahasa Inggris?

Pernah mengalami error “Error: There is no route defined for key”? Hal ini terjadi karena kita melakukan navigasi ke Nested Stacks yang berbeda. Karena dalam satu stacks, kita hanya dapat melakukan navigasi ke route yang berada dalam satu stacks tersebut. Jika kita melakukan navigasi ke stacks yang lain, maka error ini terjadi.

Dalam mengerjakan beberapa proyek yang pernah saya kerjakan, cukup banyak kasus kebutuhan yang saya temui. Yang mengharuskan saya untuk melakukan navigasi ke Nested Stacks yang berbeda. Kasus paling banyak akan terjadi jika kita menggunakan TabNavigator dan StackNavigator dalam proyek aplikasi yang sedang dikembangkan. Apalagi ditambah menggunakan DrawerNavigator, akan ada banyak konflik error seperti ini jika tidak pandai-pandai mengatur urutan route dalam setiap Nested Stacks agar sesuai dengan kebutuhan.

Contoh Kasus

Kita memiliki MainNavigator seperti berikut

const Root = StackNavigator({
  Auth: { screen: AuthStack },
  Main: { screen: MainStack },
  Menu: { screen: MenuStack },
});

Selanjutnya kita juga memiliki Nested Stacks yang telah dipanggil pada MainNavigator

const AuthStack = StackNavigator({
  AuthOne: { screen: AuthOne },
  AuthTwo: { screen: AuthTwo },
  ...
});

const MainStack = StackNavigator({
  MainOne: { screen: MainOne },
  MainTwo: { screen: MainTwo },
  ...
});

const MenuStack = TabNavigator({
  MenuOne: { screen: MenuOne },
  MenuTwo: { screen: MenuTwo },
  ...
});

Ketika kita jalan aplikasi React Native, secara default initial route akan berada pada Auth → AuthOne. Jika kita melakukan navigasi ke AuthTwo, masih bisa kita lakukan. Karena Auth memiliki Nested Stacks terdiri dari AuthOne dan AuthTwo. Tetapi jika kita melakukan navigasi ke Main maka akan muncul Error: There is no route defined for key Main. Must be one of ‘AuthOne’,’AuthTwo’. Karena kita sedang berada di route Auth.

Solusi

Source: http://kapsulbioenergi.com/

Untuk mengatasi masalah tersebut. Biasanya saya melakukan reset stack

import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
     index: 0, 
     key: null,
     actions: [
          NavigationActions.navigate({ routeName: 'Main' })
     ],
});
this.props.navigation.dispatch(resetAction);

Dengan menambahkan key: null berarti master route akan bernilai null dan tidak berada di route manapun. Sehingga kita bebas melakukan navigasi ke route dalam Nested Stacks manapun.

Referensi: https://reactnavigation.org/docs/navigation-actions.html#reset

Sekian terima kasih. Semoga bisa bermanfaat. :)

Yuk tulis ide topik atau request topik yang sedang kamu pelajari seputar React Native. Tuangkan ide atau request kamu disini http://bit.ly/RequestTopicReactNative