Next.js: ルーティングの質問-「/ profile /:id / edit」やserverdbなどのパラメータパターン-コンポーネントに反応するためにデータを渡す方法は?

作成日 2016年12月17日  ·  3コメント  ·  ソース: vercel/next.js

こんにちは、私はこの問題が以前に議論されたことを知っていますが、このパターンに対する明確な答えを見つけることができませんでした。
まず、間違っている場合は訂正してください。カスタムサーバー(httpまたはexpress)を実装していない場合、Linkコンポーネントは「/ profile?id = 123&action = edit」のようなクエリ文字列パラメーターのみをサポートしますか?
「/ profile /:id」のようなurl paramsパターンを使用できるようにするには、カスタムサーバーを実装する必要があります...これは、例を通して推測できた最高のものでした...
もしそうなら-「/ profile /:id / edit」のようなパターンをどのように実装しますか
'parameterized-routing'の例では、index.jsは次のようなリンクを使用しています。
<Link href='/blog?ip=first' as='/blog/first'><a>My first blog post</a></Link>

そして私はserver.jsで必要なワークフローが何であるかを解読することができませんでした
server.jsはconst match = route('/blog/:id')宣言します

そして、アドレスバーに正確に何が送られるのか、そして反応コンポーネントにプッシュされているデータは何なのかが不明確です。
「/ profile /:id / edit」のようなルートを処理するにはどうすればよいですか
一般的な方法で多くのルートを処理するにはどうすればよいですか(react-routerから来て、同等の一致ユーティリティを探していました...)
また、レンダリングする前にdbデータをフェッチしている場合、フェッチしたデータをreactコンポーネントに渡すにはどうすればよいですか。
これらはすべて少しあいまいです。私は成功せずに自分の道を推測しようとしていたので、あなたの助けに真剣に感謝します。

ありがとうございました
半開き

最も参考になるコメント

これは良い質問のセットです。
ドキュメントにさらに情報を追加します。

今のところ、次のように考えてください。

  • Next.jsは、ページを提供する方法しか知りません。 paramsを介して渡す必要があります。 (例: /blog?id=first
  • #310を使用すると、外の世界での外観をカスタマイズする方法が可能になります。 (例: blog/:id参照
  • また、クライアント側のルーティングを行っている場合、クライアント側のアプリはカスタムURLについて何も知りません。
  • したがって、次のようにリンクを使用する必要があります: <Link href='/blog?id=first' as='/blog/first' />

    • href:これはページの実際のURLです

    • as:これはブラウザでどのように表示されるかです(通常、カスタムURLパターンと一致する必要があります)

全てのコメント3件

これは良い質問のセットです。
ドキュメントにさらに情報を追加します。

今のところ、次のように考えてください。

  • Next.jsは、ページを提供する方法しか知りません。 paramsを介して渡す必要があります。 (例: /blog?id=first
  • #310を使用すると、外の世界での外観をカスタマイズする方法が可能になります。 (例: blog/:id参照
  • また、クライアント側のルーティングを行っている場合、クライアント側のアプリはカスタムURLについて何も知りません。
  • したがって、次のようにリンクを使用する必要があります: <Link href='/blog?id=first' as='/blog/first' />

    • href:これはページの実際のURLです

    • as:これはブラウザでどのように表示されるかです(通常、カスタムURLパターンと一致する必要があります)

ありがとう@arunoda
シンプルでクリア。

素晴らしい。 この問題を解決します。

このページは役に立ちましたか?
0 / 5 - 0 評価