Next.js: هل من الممكن تمرير الحالة إلى التالي / جهاز التوجيه؟

هذا غير ممكن حاليًا ولا أعتقد أننا سندعمه في المستقبل القريب.

لكن دعونا نفتح هذا ونرى ما إذا كنا حقًا بحاجة إلى هذا.

أعتقد أنه يجب عليك القيام بذلك عن طريق تمرير معامِلات طلب البحث.

أعني أنه يمكنك تحقيق شيء مشابه من خلال تمرير معلمات الاستعلام مثل nkzawa قال ، لكنني أفضل عدم تلويث عنوان url الخاص بي بـ http://www.example.com/?message=This%20is%20a%20long%20message%20forwarded%20to%20be%20displayed ويفضل نقل الحالة مثل كيفية قيام جهاز التوجيه المتفاعل بذلك.

يمكنك استخدام as لإخفاء عنوان URL

حسنًا ، أفترض ذلك ، ولكن إذا كنت سأستخدم as ، فإن اسم المسار لا يحتفظ باسم المسار الفعلي في props.url.pathname ، مما يعني المزيد من الأشياء لتمريرها إلى الاستعلام. إنه مجرد _cleaner_ لتمريرها إلى الولاية.

أقوم بالانتقال عبر مشروع إلى next.js ولم أواجه أي مشاكل توافق كبيرة منذ أن وجدت طرقًا لإعادة بناء الأكواد لجعلها تعمل ، إنه مجرد إزعاج وإسهاب في هذه المرحلة يمكن تحسينهما وكل هذه المشكلة هي .

شكر للجميع المدخلات الخاصة بك.

إغلاق سبب الخمول هذا

ما يزيد قليلاً عن عام منذ أن طرحت هذا الموضوع ، لكن هل ما زال هذا غير مقبول؟

يمكنك حفظ أي حالة مطلوبة في localStorage ، و sessionStorage ، ومتغير ، ومخزن Redux ، وما إلى ذلك ، ثم استخدامها في getInitialProps (التحقق من أنك تقوم بتشغيل جانب العميل).

أعتقد أن nextjs يجب أن يبدأ في دعم جهاز التوجيه التفاعلي

أريد نفس الوظيفة.

في وقت سابق كنت أستخدم CRA وهناك اعتدت على إرسال الحالة إلى المكون الموجه. أريد نفس الوظيفة مع nextjs.

ما اقترحه sergiodxa في الحل ولكن دعم المكتبة سيكون جيدًا.

نفس الشيء هنا ، سيكون رائعًا إذا كان من الممكن تمرير البيانات باستخدام Router.push() واستردادها لاحقًا باستخدام withRouter

أريد نفس الوظيفة. أي تحديث على هذا ؟

أريد نفس الوظيفة. أي تحديث على هذا ؟

أنا أيضا

سؤال آخر يتعلق بهذه القضية هو:

• لا أريد تلويث عنوان URL الخاص بي عندما أتصل بـ Router.push () وأريد تمرير حالة إلى المكون التالي. هل هناك أي طريقة للقيام بذلك؟ يعد استخدام localStorage أو ملف تعريف الارتباط ممارسة سيئة حيث لا يتم التحكم فيهما بشكل مباشر بواسطة خطافات React أو دورة حياة React القديمة

لدي سيناريو حيث لدي مكون قابل للنقر. النقر فوقه سيفتح صفحة التفاصيل الخاصة به. باستخدام next.js الحالي ، يمكنني تمرير معرّف المشاريع ثم الحصول على التفاصيل باستخدام useEffect و axios call ولكن بما أن لدي البيانات بالفعل ، فقد تمنيت حقًا إرسال الحالة إلى تلك الصفحة.

سيكون من الجيد الحصول على هذا.

sergiodxa نعم ، هناك العديد من الطرق لتمرير الرسائل المؤقتة ولكن ميزة ربطها بجهاز التوجيه هي أنه لا يتعين علينا كتابة رمز إضافي لإدارة دورة حياة القيم التي نمررها. سيتم ربطها بأحداث التنقل في جهاز التوجيه ولن تكون متاحة في سياقات أخرى.

على سبيل المثال ، إذا قمت بدفعه إلى متجر redux الخاص بي ، فحينئذٍ يتعين علي استبعاده من الاستمرار في التخزين المحلي وأيضًا إرسال إجراء رسالة واضح على الطرف المستلم.

إذا قمت بإضافتها إلى سلسلة الاستعلام ، فإنها تصبح رابطًا بيرما يستخدم لوضع إشارة مرجعية والرجوع إليه لاحقًا.

لكن يمكنني دفعها إلى الصفحة التالية والصفحة التالية فقط عبر router.push لست مضطرًا لتقديم أي تعويضات ؛ ستكون القيمة متاحة فقط في هذا السياق.

تشبه إلى حد بعيد اتصال الفلاش

لا يوجد حل منذ 15 يناير 2017؟
نحتاج إلى هذه الميزة:

نفس الشيء هنا ، سيكون رائعًا إذا كان من الممكن تمرير البيانات باستخدام Router.push() واستردادها لاحقًا باستخدام withRouter

سيكون من الجيد الحصول على هذا في nextjs

إذا كنت تريد إخفاء معلمات الاستعلام ، فما عليك سوى استخدام مثل هذا

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

من الصفحة الرئيسية ، يمكنك مشاهدة /main فقط على url و
console.log(Router.route) يعرض الاستعلام

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

أوه نعم ، هذا صحيح. بالمناسبة أجد أنه من المحرج حقًا أن يتطلب جهاز التوجيه سلسلتين. react-router يعمل بشكل جميل بدونه ، لماذا هذا؟

بالنسبة لأولئك الذين يرغبون في ذلك ، يمكنك استخدام Context Api .

يوفر Next.js router.push() تمرير shallow: true كدعم.
إنها أبسط إدارة دولة للقيام بذلك.
https://nextjs.org/docs/api-reference/next/router#routerpush

على استعداد لإعادة النظر في هذا الأمر ، إلا أنه يحتاج إلى اقتراح رائع حول كيفية منع المستخدمين من إطلاق النار على أنفسهم باستخدام حالة السجل نظرًا لأنه لا يمكنك الوصول إلى جانب خادم حالة السجل على سبيل المثال ، سيكون من السهل جدًا التسبب في مشاكل الترطيب.

هل لاحظ أن إعادة فتح هذا لا يعني أنني لن أكتب RFC لهذه الميزة ، فهذا سيكون متروكًا للأشخاص الذين يرغبون في الحصول على هذه الميزة.

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

أكثر من عامين وما زلت تنتظر ميزة الدولة

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 ، ستحتوي خاصية option على { step: 2 } .

نحتاج هذا فقط في الكائن router .

لست على دراية تامة بنظام React البيئي. ولكن يبدو أنه يمكنك القيام بذلك

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

عندما تعود وتحقق قبل PopState ، ستحتوي خاصية option على { step: 2 } .

نحتاج هذا فقط في الكائن router .

إنها تشبه الاختراق الزمني الآخر ، وليس السلوك المتعمد. يتم سرد الخيارات المتوقعة في المستندات . لكن شيئًا مشابهًا لهذا سيكون رائعًا أن يكون لديك سلوك متوقع

likerRr من الواضح أنه تم تمرير جميع معلمات الخيارات إلى window.history.state . لذلك مع المثال الخاص بي:
window.history.state == { step: 2 }

likerRr من الواضح أنه تم تمرير جميع معلمات الخيارات إلى window.history.state . لذلك مع المثال الخاص بي:
window.history.state == { step: 2 }

يبدو كما هو. على أي حال ، حتى يتم توثيقه ، لا يمكن استخدامه في المنتج ، لأن تنفيذ خيارات التمرير يمكن تغييره في أي وقت: محبط: مشكلة أخرى (؟) مع حالة السجل ، وهي مستمرة. وإذا لعبت بأزرار "للخلف" / "للأمام" ، فستحصل في الغالب على سلوك غير متوقع.

بقدر ما أفهم حالة استخدام ما يريده المجتمع هو تمرير البيانات التي لن تترك إلا أثناء الانتقال من صفحة إلى أخرى ولا يتعين علينا إزعاجها. ويجب ألا تظهر هذه البيانات مرة أخرى عندما ينقر المستخدم على "للخلف / للخلف" في المتصفح. وإلا فإن هذا هو أفضل اقتراح (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 (() => {
مقدار ثابت {
الاستعلام: {mount}،
} = جهاز توجيه ؛
! mount && Router.push ('/ campaign-Overview / subscription') ؛
console.log ('PaymentVM: React.FC -> mount'، mount) ؛
} ، []) ؛

يمكنك أن ترى قيمة mount في متصفح وحدة التحكم.

أنا أفهم المشكلة وملاءمة القدرة على تمرير الحالة في جهاز التوجيه.

هل ما يلي سيكون حلا مؤقتا؟

استخدم history.pushState الخاص بالمتصفح ، بالإضافة إلى حالة استخدام محلية لسلسلة الموقع ، وعندما نريد إعادة التوجيه ، نستخدم history.pushState بالإضافة إلى تعيين قيمة جديدة لحالة الموقع المحلي. يجب أن يؤدي تحديث حالة سلسلة الموقع إلى تشغيل useEffect. ثم احصل على بيان تبديل JS الذي يقيم الموقع ويعيد المكونات بناءً على الموقع. وإذا أردنا الوصول إلى نفس المكون بدون history.pushState (على سبيل المثال exp. إذا قام المستخدم بتحديث الصفحة) ، فيمكننا جعل الموقع معلمة استعلام ديناميكية تالية. - لم أجربها ، مجرد محاولة التفكير في الحلول.

بالنسبة لأولئك الذين يرغبون في ذلك ، يمكنك استخدام Context Api .

يوفر Next.js router.push() تمرير shallow: true كدعم.
إنها أبسط إدارة دولة للقيام بذلك.
https://nextjs.org/docs/api-reference/next/router#routerpush

ماذا لو في بلدي getServerSideProps ، قمت بإجراء مكالمتين ، أحدهما يجب إعادة بنائه لكل حمل ، والآخر يجب أن يتم تحميله بشرط فقط. لذلك ، لن يساعد Shallow: true كثيرًا لأنه ليس مديرًا للدولة ، إما أن يعيد getServerSideProps ، أو لا يفعل ذلك على الإطلاق.
مثال على هذا السيناريو هو إذا أجريت مكالمتين منفصلتين في getServerSideProps . واحد للمحتوى الرئيسي للصفحة ثم مكالمة أخرى للحصول على روابط التنقل. في التصيير الأولي ، أريد أن يكون كلا الاستدعاءين على الخادم ، ولكن بعد ذلك ، لدي بالفعل روابط التنقل في الذاكرة ، لذلك لا أحتاج إلى إعادة إحضارها. لهذا السبب نحن بحاجة للدولة.

الحل الوحيد هو إرسال خيار as مع معلمات الاستعلام المخفية ، لكن الكود الخاص بنا سيكون فظيعًا مقابل كل <Link/> نمرره في مجموعة من معلمات الاستعلام التي تحتوي على حالتنا الحالية. (في الواقع ، أثناء كتابتي ، أفكر في إنشاء رابط HOC والذي يجب أن ينتقل إلى href المحدد ويرسل على طول كائن استعلام بالحالة الحالية ، لذلك لن أحتاج إلى كتابة كائن الحالة في كل <Linke/> ، أنا سوف أتعامل مع هذا فقط في HOC)