web-dev-qa-db-fra.com

Paramètres d'URL NextJS comme React-Router

Je suis un débutant pour NextJS , il semble si bon à la première impression. Mais après lui avoir donné une chance, j'ai rencontré des problèmes comme le routage d'URL avec des paramètres personnalisés tels que react-router .

Actuellement ce que nous pouvons faire avec NextJS

https://url.com/users?id:123

Ce que nous devons avoir pour un meilleur modèle d'URL

https://url.com/users/123

Dans react-router Il a un exemple parfait ici https://reacttraining.com/react-router/web/example/url-params

reactjsreact-routernext.js
10
Nishchit Dhanani

cet exemple vous aidera à définir vos itinéraires nommés paramétrés. il utilise nest/routes et vous permet de définir vos routes de préférence personnalisées. j'espère que cela vous aidera.

https://github.com/zeit/next.js/tree/master/examples/with-next-routes

10
Manish

Vous pouvez utiliser la fonction as de next/link:

<Link prefetch as={`/product/${slug}`} href={`/product?slug=${slug}`}>

Le lien sur le navigateur apparaîtra sous la forme /product/slug Qui correspond en interne à /product?slug=slug

Vous devez avoir un serveur personnalisé pour le mappage côté serveur:

server.get("/product/:slug", (req, res) => {
  return app.render(req, res, "/product", { slug: req.params.slug })
})
9
Rashidul Islam

Pour ceux qui arrivent en retard à cette fête, nous avons maintenant routage dynamique dans les 9 suivants.

Ce qui permettrait de créer une structure d'URL comme celle-ci en utilisant la structure de fichiers, et sans packages supplémentaires.

Vous pouvez créer un fichier pages/user/[id].js

Avec

import { useRouter } from 'next/router'

const User = () => {
  const router = useRouter()
  const { id } = router.query

  return <p>User: {id}</p>
}

export default User
6
Davey

Premier routeur d'importation

import Router from 'next/router'

Ensuite, si vous souhaitez l'utiliser dans une balise Link

<Link href={{ pathname: '/about', query: { name: 'Sajad' } }}>

Si vous souhaitez l'utiliser dans une fonction ou après un rappel

Router.Push({
    pathname: '/about',
    query: { name: 'Sajad' },
  })
2
sajad saderi

J'ai rencontré le même problème, mais j'ai trouvé ce package, https://github.com/fridays/next-routes

Cela fonctionne presque de la même manière que react-router, je l'ai essayé et cela fonctionne pour moi.

1
Hassan Nemir