Next.js: 次/ルーターに状態を渡すことは可能ですか？

現在、それは不可能であり、近い将来サポートすることはないと思います。

しかし、これを開いて、本当にこれが必要かどうかを見てみましょう。

クエリパラメータを渡してこれを行う必要があると思います。

つまり、nkzawaが言ったようにクエリパラメータを渡すことで同様のことを達成できますが、URLをhttp://www.example.com/?message=This%20is%20a%20long%20message%20forwarded%20to%20be%20displayedで汚染するのではなく、react-routerのように状態を転送したいと思います。

asを使用してURLを偽装できます

そうだと思いますが、 asを使用した場合、パス名はprops.url.pathnameに実際のパス名を保持しません。これは、クエリに渡すものが増えることを意味します。 状態を通過させるのは_cleaner_だけです。

プロジェクトをnext.jsに移植していますが、コードをリファクタリングして機能させる方法を見つけたので、大きな互換性の問題は発生していません。現時点で改善できるのは不便で冗長です。この問題はすべて。

ご意見ありがとうございます。

この非アクティブの原因を閉じる👍

私がこれを提起してから1年余りですが、これはまだサポートされていませんか？

必要な状態をlocalStorage、sessionStorage、変数、Reduxストアなどに保存してから、getInitialPropsで使用できます（クライアント側を実行していることを確認します）。

nextjsはreact-routerのサポートを開始する必要があると思います

同じ機能が欲しい。

以前はCRAを使用していて、ルーティングされたコンポーネントに状態を送信していました。 nextjsと同じ機能が必要です。

@sergiodxaが回避策で提案したものですが、ライブラリのサポートは優れています。

ここでも同じですが、 Router.push()でデータを渡し、後でwithRouterでデータを取得できると便利です。

同じ機能が欲しい。 これに関する更新はありますか？

同じ機能が欲しい。 これに関する更新はありますか？

私もです

この問題に関連する別の質問は次のとおりです。

• Router.push（）を呼び出したときに、URLを汚染したくないので、次のコンポーネントに状態を渡します。 それを行う方法はありますか？ localStorageまたはcookieを使用することは、Reactフックまたは古いReactライフサイクルによって直接制御されないため、悪い習慣です。

クリック可能なコンポーネントがあるシナリオがあります。 クリックすると詳細ページが開きます。 現在のnext.jsでは、プロジェクトIDを渡してから、useEffectとaxios呼び出しを使用して詳細を取得できますが、データが既にあるので、そのページに状態を送信できます。

これがあればいいのに。

@sergiodxaはい、一時的なメッセージを渡す方法はたくさんありますが、メッセージをルーターに関連付けることの利点は、渡す値のライフサイクルを管理するために余分なコードを記述する必要がないことです。 これらはルーターのナビゲーションイベントに関連付けられ、他のコンテキストでは使用できません。

たとえば、それをreduxストアにプッシュする場合、ローカルストレージへの永続化から除外し、受信側でクリアメッセージアクションをディスパッチする必要があります。

クエリ文字列を追加すると、canブックマークを使用して後で戻ることができるパーマリンクになります。

ただし、次のページにプッシュでき、 router.pushを介して次のページにのみプッシュできます。補償を行う必要はありません。 値はそのコンテキストでのみ使用可能になります。

connect-flashと非常によく似ています

2017年1月15日以降、解決策はありませんか？
その機能が必要です：

ここでも同じですが、 Router.push()でデータを渡し、後でwithRouterでデータを取得できると便利です。

nextjsにこれがあるといいでしょう

クエリパラメータを非表示にする場合は、次のように使用します

Router.push(`/main?userName=${userName}`, 'main')

メインページよりも、URLに/mainしか表示されません。
console.log(Router.route)はクエリを表示します

pathname: "/main"
query: {userName: "fadsfasd"}
asPath: "main"

そうそう、それは本当です。 ところで、ルーターが2つの文字列を必要とするのは本当に厄介だと思います。 react-routerはなくても美しく機能しますが、なぜこれが必要なのですか？

それを作りたい人のために、あなたはContext Apiを使うことができます。

Next.jsは、$ shallow: true router.push()を提供します。
これを行うのが最も簡単な状態管理です。
https://nextjs.org/docs/api-reference/next/router#routerpush

これを再考することをいとわないが、たとえばサーバー側の履歴状態にアクセスできない場合、ユーザーが履歴状態を使用して自分の足を撃たないようにする方法についての優れた提案が必要です。たとえば、水分補給の問題が発生するのは非常に簡単です。

これを再度開くことは、この機能のRFCを作成しないことを意味するわけではないことに注意してください。これは、この機能を使用したい人次第です。

Router.push({ pathname: '/', query: { message: 'This is a message forwarded in a state.' } }, '/')

2年以上、まだ州の機能を待っています

Router.push({ pathname: '/', query: { message: 'This is a message forwarded in a state.' } }, '/')

これはまだ内部状態ではなく、マスク機能を備えたクエリ文字列です。これは私の意見ではかなり奇妙なことです。

私はReactエコシステムにあまり詳しくありません。 しかし、あなたはできるようです

router.push(
  { pathname: '/hello-world' }, 
  '/hello-world/2', 
  { step: 2 }
);

PopStateの前に戻って確認すると、オプションの小道具には{ step: 2 }が含まれます。

これはrouterオブジェクトでのみ必要です。

私はReactエコシステムにあまり詳しくありません。 しかし、あなたはできるようです

router.push(
  { pathname: '/hello-world' }, 
  '/hello-world/2', 
  { step: 2 }
);

PopStateの前に戻って確認すると、オプションの小道具には{ step: 2 }が含まれます。

これはrouterオブジェクトでのみ必要です。

これは、意図的な動作ではなく、別の一時的なハックのように継ぎ目があります。 予想されるオプションは、ドキュメントに記載されています。 しかし、これに似たものは、期待どおりの動作をするのに最適です

@likerRrどうやら、すべてのオプションパラメータがwindow.history.stateに渡されています。 だから私の例では：
window.history.state == { step: 2 }

@likerRrどうやら、すべてのオプションパラメータがwindow.history.stateに渡されています。 だから私の例では：
window.history.state == { step: 2 }

そうです。 とにかく、それが文書化されるまで、それはprodで使用できません。なぜなら、渡すオプションの実装はいつでも変更できるからです：dispointed：履歴状態に関する別の問題（？）、それは永続的です。 また、「戻る」/「進む」ボタンで遊ぶと、ほとんどの場合、予期しない動作が発生します。

私が理解している限り、コミュニティが望んでいるのは、あるページから別のページへの移行中にのみ残るデータを渡すことであり、わざわざクリアする必要はありません。 また、ユーザーがブラウザで「前後」をクリックしたときに、このデータが再び表示されることはありません。 それ以外の場合、これは最良の提案（imo）です。

次のjsがこれを考慮した場合はいいでしょう

これは私のために働いた、あなたは使うことができます
https://github.com/vercel/next.js/issues/771#issuecomment -612018764

1：サブスクリプションページ：
const handleClick = useCallback（（mount）=> {
Router.push（ /payment?mount=${mount} 、 '/ payment'）;
}、[]）;
2：支払いページ
useEffect（（）=> {
const {
クエリ：{マウント}、
} =ルーター;
！mount && Router.push（ '/ campaign-overview / subscription'）;
console.log（ 'PaymentVM：React.FC->マウント'、マウント）;
}、[]）;

コンソールブラウザでmountの値を確認できます。

router.pushで状態を渡すことができるという問題と便利さを理解しています。

以下は一時的な解決策でしょうか？

ブラウザのhistory.pushStateと、場所の文字列のローカルuseStateを使用します。リダイレクトする場合は、history.pushStateを使用し、新しい値をローカルの場所の状態に設定します。 location-string-stateを更新すると、useEffectの実行がトリガーされます。 次に、場所を評価し、場所に基づいてコンポーネントを返すJSスイッチステートメントを用意します。 また、history.pushStateなしで同じコンポーネントにアクセスしたい場合（ユーザーがページを更新した場合のexp。の場合）、場所を動的な次のクエリパラメーターにすることができます。 -回避策を考えようとしただけで、それを試しませんでした。

それを作りたい人のために、あなたはContext Apiを使うことができます。

Next.jsは、$ shallow: true router.push()を提供します。
これを行うのが最も簡単な状態管理です。
https://nextjs.org/docs/api-reference/next/router#routerpush

getServerSidePropsで、2つの呼び出しを行い、そのうちの1つはロードごとにやり直し、もう1つは条件付きでのみロードする必要がある場合はどうなりますか。 そのため、 Shallow: trueは、状態管理者ではないか、 getServerSidePropsをやり直すか、まったく行わないため、あまり役に立ちません。
このシナリオの例は、 getServerSidePropsで2つの別々の呼び出しを行う場合です。 1つはページのメインコンテンツ用で、もう1つはナビゲーションリンクを取得するための呼び出しです。 最初のレンダリングでは、両方の呼び出しをサーバー上に配置したいのですが、その後、メモリにnavリンクが既にあるので、それらを再フェッチする必要はありません。 それが私たちが国家を必要とする理由です。

唯一の解決策は、非表示のクエリパラメータを使用してasオプションを送信することですが、現在の状態を含む一連のクエリパラメータを渡すすべての<Link/>に対して、コードはひどいものになります。 （実際、Imが書いているように、指定されたhrefに移動し、現在の状態でクエリオブジェクトを送信するHOCリンクを作成することを考えているので、各<Linke/>に状態オブジェクトを書き込む必要はありません。これはHOCでのみ処理します）