Nettoyez vos routes d'URL, même sur les applications mobiles, à l'aide de la bibliothèque Expo Router.

Le routage basé sur les fichiers est une technique de développement Web courante qui mappe un chemin d'URL vers un fichier spécifique dans un répertoire de projet. Ce système évite les configurations de routage complexes impliquées dans la construction de systèmes de navigation.

Avec la sortie de la bibliothèque Expo Router, le routage basé sur les fichiers est possible avec les applications React Native. Expo Router pourrait être un meilleur système de navigation pour les développeurs React Native travaillant avec Expo.

La navigation réinventée avec Expo Router

Le routeur expo fournit une solution de routage déclarative pour les applications React Native Expo. Ce système est considérablement différent de ce que vous feriez construire un système de navigation en utilisant React Navigation. Expo Router répond aux principales préoccupations liées à l'utilisation du système de navigation actuel.

instagram viewer

Ces problèmes incluent un système de navigation qui ne fonctionne pas de manière cohérente partout, des difficultés à gérer les liens profonds, ainsi que des configurations complexes pour les transitions de navigation personnalisées.

La navigation/routage basée sur les fichiers du routeur expo est un système simple qui fonctionne bien et est déjà familier aux développeurs JavaScript et aux frameworks JavaScript comme Next.js, où vous pouvez définir des routes.

Installation et configuration du routeur Expo

Il est assez simple de migrer votre projet Expo de l'ancien système de navigation vers l'utilisation du routeur Expo.

Étape 1: Installer le routeur Expo

Utilisez cette commande de terminal pour exécuter le programme d'installation d'expo-router :

npx expo installer expo-routeur

Vous devrez également vous assurer que vous avez installé ces dépendances de pairs :

  • réagir-native-safe-area-context
  • écrans natifs réactifs
  • expo-liaison
  • barre d'état expo
  • gestionnaire de geste natif de réaction

S'il en manque, vous pouvez les installer en exécutant :

installation de l'exposition npx

Étape 2: Mettre à jour le point d'entrée

Créer un nouveau index.js fichier pour remplacer votre existant App.js point d'entrée et définissez le index.js comme point d'entrée de l'application à l'intérieur app.json:

// Définir index.js comme point d'entrée
{
"principal": "index.js"
}
// Importez ce qui suit dans index.js
importer"expo-routeur/entrée";

Expo Router utilise un lien profond schéma pour déterminer l'écran ou le contenu à ouvrir lors du routage.

Définissez un schéma de liens profonds pour votre application en ajoutant un schème propriété à app.json:

{
"expo": {
"schème": "monapplication"
 }
}

Étape 4: configuration finale

La dernière étape consiste à configurer le bundler métro de votre application Expo et à configurer Babel pour prendre en charge Expo Router dans votre application.

À l'intérieur babel.config.js modifiez le code existant pour qu'il ressemble à ceci :

module.exports = fonction (API) {
 api.cache(vrai);
retour {
 préconfigurations: ["babel-preset-expo"],
 plugins: [
exiger.résoudre("expo-routeur/babel"),
/* */
 ],
 };
};

Maintenant, reconstruisez et démarrez votre application en exécutant :

npx expo --clear
2 photos

Construire les itinéraires de votre application avec Expo Router

Vous pouvez commencer à configurer un flux de navigation dans le application dossier. Le index.js fichier est votre point de départ. Expo Router ajoute le chemin de chaque fichier que vous créez à l'intérieur application au système de routage de l'application avec des liens URL profonds correspondant à chaque page.

Par exemple, créez un SecondScreen.js fichier à l'intérieur du application répertoire et exportez un composant par défaut :

importer { Feuille de style, Texte, Affichage } depuis"réagir natif";
importer Réagir depuis"réagir";
constante Deuxième écran = () => {
retour (


Deuxième écran</Text>
 </View>
 </View>
 );
};


exporterdéfaut Deuxième écran ;
constante styles = StyleSheet.create({});

Vous pouvez accéder à cet écran à partir de index.js avec le useRouter() méthode:

importer { useRouter } depuis"expo-routeur";
exporterdéfautfonctionPage() {
constante navigation = useRouter();


retour (

Bonjour le monde </Text>
C'est la première page de votre application.</Text>
 titre="Naviguer vers SecondScreen"
 onPress={() => {
 navigation.push("/Deuxième écran");
 }}
 />
 </View>
 );
}

Ici, vous affectez le routeur à la navigation et l'utilisez dans l'élément Button en appelant navigation.push("/seconde"). L'argument dans push est le chemin du fichier de l'écran vers lequel vous souhaitez naviguer.

À l'intérieur Deuxième écran vous pouvez également accéder à l'écran d'index comme ceci :

importer { Lien } depuis"expo-routeur";
constante Deuxième écran = () => {
retour (


Deuxième écran</Text>
"/" commeEnfant>

Accédez à index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

L'élément de lien prend un accessoire href pour spécifier le chemin. À l'intérieur de l'application, le "/" path correspond au fichier d'entrée (index.js). Le deuxième accessoire est asChild. Cet accessoire vous permet de restituer un premier composant enfant avec tous les accessoires spécifiés au lieu du composant Link par défaut. Vous pouvez l'utiliser pour personnaliser l'apparence du composant Link ou pour implémenter une logique de routage personnalisée.

Définir des routes dynamiques

Avec les routes dynamiques, vous pouvez générer des routes dynamiquement en fonction de certains paramètres ou données. Au lieu de définir un ensemble fixe d'itinéraires, vous gagnez en flexibilité et en adaptabilité dans la navigation de votre application.

Pour commencer à utiliser des itinéraires dynamiques dans Expo Router, vous devez définir les itinéraires pour gérer le contenu dynamique. Vous pouvez utiliser des itinéraires paramétrés en spécifiant des espaces réservés dans le chemin de l'itinéraire. Les valeurs de ces espaces réservés seront alors disponibles pour votre itinéraire lorsque quelqu'un y naviguera.

Par exemple, considérez une application de blog où vous souhaitez afficher des articles de blog individuels. Vous pouvez définir une route dynamique pour gérer chacun des articles de blog :

// app/routes/BlogPost.js
importer Réagir depuis"réagir";
importer { useRouter } depuis"expo-routeur";
constante Article de blog = ({ itinéraire }) => {
constante { postId } = route.params ;


retour (

Affichage de l'article de blog avec Identifiant: {postId}</Text>
 </View>
 );
};
exporterdéfaut BlogPost ;

Dans cet exemple, vous définissez un composant de route dynamique nommé BlogPost. Le route.params L'objet vous permet d'accéder aux valeurs des paramètres passés à la route. Dans ce cas, vous accédez à un identifiant de poste paramètre pour afficher le billet de blog correspondant.

Génération de routes dynamiques

Maintenant que vous avez défini un itinéraire dynamique, vous pouvez générer des itinéraires dynamiquement en fonction des données ou des entrées de l'utilisateur. Par exemple, si vous avez une liste d'articles de blog extraits d'une API, vous pouvez générer dynamiquement des itinéraires pour chaque article de blog.

Voici un exemple :

// app/components/BlogList.js
importer Réagir depuis"réagir";
importer { utiliserNavigation } depuis"expo-routeur";
constante ListeBlog = ({ articles de blog }) => {
constante navigation = useNavigation();


constante naviguerVersBlogPost = (identifiant de poste) => {
 navigation.naviguer("BlogPost", { postId });
 };


retour (

 {blogMessages.map((poste) => (
 clé={post.id}
 onPress={() =>naviguerVersBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
exporterdéfaut Liste de blog ;

Dans cet exemple, vous parcourez le articles de blog tableau et rendre un composante pour chaque poste. Lorsque vous appuyez sur un message, le naviguerVersBlogPublier la fonction s'exécute, en passant le identifiant de poste à la route de navigation.

Gestion des routes dynamiques

Vous pouvez écouter les événements de navigation spécifiques à un itinéraire dynamique à l'aide de la utiliserFocusEffet accrocher.

Par exemple:

// app/routes/BlogPost.js
importer Réagir depuis"réagir";
importer { Route, useFocusEffect } depuis"expo-routeur";
constante Article de blog = ({ itinéraire }) => {
constante { postId } = route.params ;


 useFocusEffet(() => {
// Récupère les données des articles de blog en fonction du postId
// Effectuez toutes les autres actions nécessaires sur le focus
 });


retour (

Affichage de l'article de blog avec Identifiant: {postId}</Text>
 </View>
 );
};
exporterdéfaut BlogPost ;

Dans cet exemple, le utiliserFocusEffet hook écoute les événements de focus spécifiques au BlogPost composant. Dans le rappel, vous pouvez récupérer des données supplémentaires, effectuer des actions ou mettre à jour l'écran en fonction de l'article de blog ciblé.

Naviguer avec des itinéraires dynamiques

Pour naviguer vers un itinéraire dynamique, vous pouvez utiliser les méthodes de navigation fournies par Expo Router.

Par exemple, pour accéder au BlogPost composant avec une spécificité identifiant de poste, vous pouvez utiliser le navigation.naviguer méthode:

// app/components/BlogList.js
importer Réagir depuis"réagir";
importer { utiliserNavigation } depuis"expo-routeur";
constante ListeBlog = ({ articles de blog }) => {
constante navigation = useNavigation();


constante naviguerVersBlogPost = (identifiant de poste) => {
 navigation.naviguer("BlogPost", { postId });
 };


retour (

 {blogMessages.map((poste) => (
 clé={post.id}
 onPress={() =>naviguerVersBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
exporterdéfaut Liste de blog ;

Lorsque vous appuyez sur un article de blog, le naviguerVersBlogPublier fonction se déclenchera avec le identifiant de poste.

Expo Router vous aide à structurer vos applications natives

Le routeur Expo fournit une excellente solution pour gérer la navigation dans vos applications React Native. En réinventant l'expérience de routage native, Expo Router offre flexibilité et facilité d'utilisation.

Vous avez exploré les fonctionnalités d'Expo Router, approfondi les concepts de routage de base et découvert comment créer des routes dynamiques. Avec Expo Router, vous pouvez créer des flux de navigation dynamiques, gérer différentes données ou entrées utilisateur et personnaliser la navigation dans votre application.