Comment utiliser le routeur Next.js

Apprenez à utiliser lenext/routerpackage pour contrôler les routes dans Next.js

Danslier deux pages dans Next.js à l'aide de Linknous avons vu comment utiliser le composant Link pour gérer de manière déclarative le routage dans les applications Next.js.

Il est très pratique de gérer le routage dans JSX, mais vous devez parfois déclencher un changement de routage par programme.

Dans ce cas, vous pouvez accéder directement au routeur Next.js, fourni dans lenext/routerpackage, et appelez sonpush()méthode.

Voici un exemple d'accès au routeur:

import { useRouter } from 'next/router'

export default () => { const router = useRouter() //… }

Une fois que nous obtenons l'objet routeur en invoquantuseRouter(), nous pouvons utiliser ses méthodes.

Il s'agit du routeur côté client, les méthodes ne doivent donc être utilisées que dans le code frontal. Le moyen le plus simple de s'en assurer consiste à encapsuler les appels dans leuseEffect()Crochet React, ou à l'intérieurcomponendDidMount()dans les composants avec état React.

Ceux que vous utiliserez probablement le plus sontpush()etprefetch().

push()nous permet de déclencher par programmation un changement d'URL, dans le frontend:

router.push('/login')

prefetch()nous permet de pré-extraire une URL par programmation, ce qui est utile lorsque nous n'avons pasLinktag qui gère automatiquement la prélecture pour nous:

router.prefetch('/login')

Exemple complet:

import { useRouter } from 'next/router'

export default () => { const router = useRouter()

useEffect(() => { router.prefetch(’/login’) }) }

Vous pouvez également utiliser le routeur pour écouterévénements de changement d'itinéraire.

Téléchargez mon gratuitManuel Next.js


Plus de prochains tutoriels: