web-dev-qa-db-ja.com

React-RouterのようなNextJS URLパラメータ

私は NextJS の初心者です。第一印象はとてもよく見えます。しかし、それにチャンスを与えた後、 react-router のようなカスタムパラメータを使用したURLルーティングなどの問題に直面しました。

現在NextJSでできること

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

URLパターンを改善するために必要なもの

https://url.com/users/123

React-routerには、ここに完璧な例があります https://reacttraining.com/react-router/web/example/url-params

reactjsreact-routernext.js
10
Nishchit Dhanani

この例は、パラメーター化された名前付きルートを定義するのに役立ちます。ネスト/ルートを使用し、好みのカスタムルートを定義できます。それがお役に立てば幸いです。

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

10
Manish

next/linkのas機能を使用できます。

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

ブラウザのリンクは/product/slugとして表示され、内部的に/product?slug=slugにマッピングされます

サーバー側のマッピングには カスタムサーバー が必要です。

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

このパーティーに遅れて到着する人のために、Next 9に 動的ルーティング があります。

これにより、ファイル構造を使用して、追加のパッケージなしで、URL構造をこのように作成することができます。

ファイルを作成できますpages/user/[id].js

と

import { useRouter } from 'next/router'

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

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

export default User
6
Davey

最初のインポートルーター

import Router from 'next/router'

次に、リンクタグで使用する場合

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

関数内またはコールバック後に使用する場合

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

同じ問題を経験しましたが、このパッケージを見つけました https://github.com/fridays/next-routes

これは、react-routerとほぼ同じように機能します。私は試してみましたが、うまくいきました。

1
Hassan Nemir