J'ai un blog Next.js avec seulement 2 routes: / et / posts /: slug .
Quand je suis sur / posts / my-post-title et que je clique sur le lien de retour (vers / ), tout va bien. La page se charge rapidement (pas d'actualisation).
Lorsque je suis sur / et que je clique sur / posts / my-post-title , la page s'actualise et je ne comprends pas pourquoi. Une suggestion?
4 Réponses :
Je viens de trouver la réponse ...
Parce que je mappe dynamiquement / posts /: slug à / posts? slug =: slug dans ma config (pour atteindre posts.jsx ), je dois faire de même avec le composant Link (via la propriété as ).
Heck, j'utilisais également des URL créées dynamiquement et je me demandais pourquoi cela se produisait ainsi. C'est dommage...
Une chose à garder à l'esprit lors de l'utilisation de Link dans next.js est de ne pas ajouter "/" au début, c'est-à-dire
<Link
href="/nameoflink"
>
<a>
Click Me
</a>
</Link>
au lieu de,
<Link
href="nameoflink"
>
<a>
Click Me
</a>
</Link>
Si vous ajoutez "/" au début, la page s'actualise. Cependant, vous devez ajouter "/" au début si ce lien est dans un composant commun accessible dans toute l'application comme la barre de navigation, dans ce cas, ajoutez "/" au début. Essayez-le si cela fonctionne pour vous, alors super. J'ai juste pensé que je devrais partager.
J'ai déjà eu ce problème, je pensais l'avoir résolu, mais encore une fois, rien de ce qui précède ne m'a aidé à résoudre le problème complètement, alors je publie ma solution.
Supposons que vous souhaitiez accéder à l'emplacement / [key] route en utilisant le lien.
Ensuite, dans le dossier pages, créez un dossier avec un emplacement de nom et à l'intérieur, créez un fichier avec le nom [clé] .js, Remarque: n'oubliez pas de mettre cela []. p >
dans le dossier [key] .js, vous pouvez simplement exporter le composant que vous souhaitez rendre. Il existe de nombreuses approches pour cela, n'allons pas y entrer maintenant.
Maintenant, en utilisant Link, utilisez-le de cette façon,
<Link
href={'/slot/[key]'}
as = {`/slot/${your_dynamic_variable}`}
>
<a>
Go to the slot route
</a>
</Link>
** Utilisez le lien comme ci-dessous: **
<Link href={`/shop/${id}`} as={`/shop/${id}`}>
<a>Shop by menu</a>
</Link>
Au lieu de
<Link href="/shop/[pid]" as={`/shop/${id}`}>
<a>Shop by menu</a>
</Link>