Next.js: राज्य को अगले/राउटर में पास करना संभव है?

वर्तमान में यह संभव नहीं है और मुझे नहीं लगता कि हम तत्काल भविष्य में इसका समर्थन करेंगे।

लेकिन आइए इसे खोलें और देखें कि क्या हमें वास्तव में इसकी आवश्यकता है।

मुझे लगता है कि आपको क्वेरी पैरामीटर पास करके ऐसा करना चाहिए।

मेरा मतलब है कि आप nkzawa जैसे क्वेरी पैरामीटर में पास करके एक समान चीज़ प्राप्त कर सकते हैं, लेकिन मैं अपने यूआरएल को http://www.example.com/?message=This%20is%20a%20long%20message%20forwarded%20to%20be%20displayed से प्रदूषित नहीं करना चाहता हूं और इसके बजाय एक राज्य हस्तांतरण होगा जैसे प्रतिक्रिया-राउटर यह कैसे करता है।

आप URL को छिपाने के लिए as का उपयोग कर सकते हैं

ठीक है, मुझे ऐसा लगता है, लेकिन अगर मुझे as का उपयोग करना था, तो पथनाम वास्तविक पथनाम को props.url.pathname में नहीं रखता है, जिसका अर्थ क्वेरी में पास करने के लिए और चीजें हैं। राज्य को पास कराने के लिए यह सिर्फ _cleaner_ है।

मैं एक परियोजना को next.js पर पोर्ट कर रहा हूं और किसी भी बड़ी संगतता समस्याओं में नहीं चला हूं क्योंकि मुझे इसे काम करने के लिए कोड को रिफैक्टर करने के तरीके मिल गए हैं, इस बिंदु पर यह केवल असुविधा और वाचालता है जिसे सुधारा जा सकता है और यह सब मुद्दा है .

आपके निवेश - सहयोग के लिए धन्यवाद।

निष्क्रियता के इस कारण को बंद करना

मुझे इसे लाए हुए एक साल से थोड़ा अधिक समय हो गया है, लेकिन क्या यह अभी भी समर्थन योग्य नहीं है?

आप किसी भी आवश्यक स्थिति को लोकलस्टोरेज, सेशनस्टोरेज, एक वेरिएबल, एक रेडक्स स्टोर, आदि में सहेज सकते हैं और फिर इसे getInitialProps में उपयोग कर सकते हैं (जांच कर रहे हैं कि आप क्लाइंट साइड चला रहे हैं)।

मुझे लगता है कि नेक्स्टज को प्रतिक्रिया-राउटर का समर्थन करना शुरू कर देना चाहिए

मुझे वही कार्यक्षमता चाहिए।

पहले मैं सीआरए का उपयोग कर रहा था और वहां मैं रूटेड कंपोनेंट को स्टेट भेजता था। मैं nextjs के साथ समान कार्यक्षमता चाहता हूं।

वर्कअराउंड में @sergiodxa ने क्या सुझाव दिया लेकिन पुस्तकालय का समर्थन अच्छा होगा।

यहां वही है, यह बहुत अच्छा होगा यदि यह संभव हो तो Router.push() के साथ डेटा पास करें और इसे बाद में withRouter के साथ पुनर्प्राप्त करें

मुझे वही कार्यक्षमता चाहिए। इस पर किसी भी अद्यतन ?

मुझे वही कार्यक्षमता चाहिए। इस पर किसी भी अद्यतन ?

मैं भी

इस मुद्दे से जुड़ा एक और सवाल है:

• जब मैं राउटर को कॉल करता हूं तो मैं अपने यूआरएल को प्रदूषित नहीं करना चाहता हूं। पुश() और मैं एक राज्य को अगले घटक में पास करना चाहता हूं। इसे करने का कोई तरीका है? लोकलस्टोरेज या कुकी का उपयोग करना एक बुरा अभ्यास है क्योंकि वे सीधे रिएक्ट हुक या पुराने रिएक्ट जीवनचक्र द्वारा नियंत्रित नहीं होते हैं

मेरे पास एक परिदृश्य है जहां मेरे पास एक क्लिक करने योग्य घटक है। इसे क्लिक करने पर इसका विवरण पृष्ठ खुल जाएगा। वर्तमान next.js के साथ मैं प्रोजेक्ट आईडी पास कर सकता हूं और फिर useEffect और axios कॉल का उपयोग करके विवरण प्राप्त कर सकता हूं, लेकिन चूंकि मेरे पास पहले से ही डेटा है, मैं वास्तव में चाहता हूं कि मैं उस पृष्ठ पर राज्य भेज सकूं।

यह होना अच्छा होगा।

@sergiodxa हां, अस्थायी संदेशों को पारित करने के कई तरीके हैं लेकिन इसे राउटर से बांधने का लाभ यह है कि हमें उन मूल्यों के जीवन चक्र को प्रबंधित करने के लिए अतिरिक्त कोड लिखने की आवश्यकता नहीं है जो हम पास करते हैं। वे राउटर नेविगेशन इवेंट से जुड़े रहेंगे और अन्य संदर्भों में अनुपलब्ध रहेंगे।

उदाहरण के लिए, यदि मैं इसे अपने रेडक्स स्टोर पर धकेलता हूं, तो मुझे इसे स्थानीय भंडारण में बने रहने से बाहर करना होगा और प्राप्त करने वाले छोर पर एक स्पष्ट संदेश कार्रवाई भी भेजनी होगी।

अगर मैं इसे क्वेरी स्ट्रिंग जोड़ता हूं तो यह एक परमा लिंक बन जाता है जो बुकमार्क कर सकता है और बाद में वापस आ सकता है।

लेकिन मैं इसे अगले पृष्ठ पर और केवल अगले पृष्ठ पर router.push के माध्यम से धक्का दे सकता हूं मुझे कोई क्षतिपूर्ति करने की आवश्यकता नहीं है; मान केवल उस संदर्भ में उपलब्ध होगा।

कनेक्ट-फ्लैश के समान ही

15 जनवरी 2017 से कोई समाधान नहीं?
हमें वह सुविधा चाहिए:

यहां वही है, यह बहुत अच्छा होगा यदि यह संभव हो तो Router.push() के साथ डेटा पास करें और इसे बाद में withRouter के साथ पुनर्प्राप्त करें

इसे nextjs में रखना अच्छा होगा

यदि आप क्वेरी पैरा को छिपाना चाहते हैं, तो बस इस तरह उपयोग करें

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

मुख्य पृष्ठ की तुलना में, आप url पर केवल /main देख सकते हैं और
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.' } }, '/')

2 साल से अधिक और अभी भी राज्य सुविधा की प्रतीक्षा कर रहे हैं

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

यह अभी भी आंतरिक स्थिति नहीं है, यह एक मुखौटा सुविधा के साथ एक क्वेरी स्ट्रिंग है, जो मेरी राय में करने के लिए काफी अजीब बात है।

मैं रिएक्ट इकोसिस्टम से बहुत परिचित नहीं हूँ। लेकिन ऐसा प्रतीत होता है कि आप कर सकते हैं

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

जब आप वापस जाते हैं और पॉपस्टेट से पहले जांचते हैं, तो विकल्प प्रोप में { step: 2 } होगा।

हमें केवल router ऑब्जेक्ट में इसकी आवश्यकता है।

मैं रिएक्ट इकोसिस्टम से बहुत परिचित नहीं हूँ। लेकिन ऐसा प्रतीत होता है कि आप कर सकते हैं

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

जब आप वापस जाते हैं और पॉपस्टेट से पहले जांचते हैं, तो विकल्प प्रोप में { step: 2 } होगा।

हमें केवल router ऑब्जेक्ट में इसकी आवश्यकता है।

यह एक और अस्थायी हैक की तरह है, जानबूझकर व्यवहार नहीं। अपेक्षित विकल्प डॉक्स में सूचीबद्ध हैं। लेकिन ऐसा ही कुछ अपेक्षित व्यवहार करने के लिए बहुत अच्छा होगा

@likerRr जाहिर तौर पर सभी विकल्प पैरामीटर को पास किया जा रहा है window.history.state । तो मेरे उदाहरण के साथ:
window.history.state == { step: 2 }

@likerRr जाहिर तौर पर सभी विकल्प पैरामीटर को पास किया जा रहा है window.history.state । तो मेरे उदाहरण के साथ:
window.history.state == { step: 2 }

ऐसा लगता है जैसे है। वैसे भी, जब तक इसे प्रलेखित नहीं किया जाता है, तब तक इसका उपयोग उत्पादों में नहीं किया जा सकता है, क्योंकि पासिंग विकल्पों के कार्यान्वयन को कभी भी बदला जा सकता है: निराश: इतिहास की स्थिति के साथ एक और समस्या (?), कि यह लगातार है। और यदि आप "पीछे"/"आगे" बटन के साथ खेलते हैं तो आपको अधिकतर अप्रत्याशित व्यवहार मिलेगा।

जहां तक ​​​​मैं समझता हूं कि समुदाय क्या चाहता है उसका उपयोग मामला डेटा पास करना है जो केवल एक पृष्ठ से दूसरे पृष्ठ पर संक्रमण के दौरान छोड़ देगा और हमें इसे साफ़ करने की परेशानी नहीं है। और जब उपयोगकर्ता ब्राउज़र में "पीछे/आगे" क्लिक करता है तो यह डेटा फिर से प्रकट नहीं होना चाहिए। अन्यथा यह सबसे अच्छा प्रस्ताव है (आईएमओ)।

अच्छा होगा अगर अगले जेएस इस पर विचार करें

इसने मेरे लिए काम किया, आप इसका उपयोग कर सकते हैं
https://github.com/vercel/next.js/issues/771#issuecomment -612018764

1: सदस्यता पृष्ठ में:
कॉन्स्ट हैंडलक्लिक = उपयोग कॉलबैक ((माउंट) => {
राउटर.पुश ( /payment?mount=${mount} , '/ भुगतान');
}, []);
2: भुगतान पृष्ठ में
उपयोग प्रभाव (() => {
कास्ट {
क्वेरी: {माउंट},
} = राउटर;
!माउंट && राउटर.पुश ('/ अभियान-अवलोकन/सदस्यता');
कंसोल.लॉग ('PaymentVM:React.FC -> माउंट', माउंट);
}, []);

आप कंसोल ब्राउज़र में mount का मान देख सकते हैं।

मैं इस मुद्दे और राउटर.पुश में राज्य के साथ गुजरने में सक्षम होने की सुविधा को समझता हूं।

क्या निम्नलिखित एक अस्थायी समाधान होगा?

ब्राउज़र के history.pushState, साथ ही स्थान स्ट्रिंग के स्थानीय उपयोगस्टेट का उपयोग करें, और जब हम रीडायरेक्ट करना चाहते हैं, तो हम history.pushState का उपयोग करते हैं और साथ ही स्थानीय स्थान स्थिति के लिए एक नया मान सेट करते हैं। स्थान-स्ट्रिंग-स्थिति के लिए एक अद्यतन को उपयोग प्रभाव रन को ट्रिगर करना चाहिए। फिर एक जेएस स्विच स्टेटमेंट है जो स्थान का मूल्यांकन करता है और स्थान के आधार पर घटकों को लौटाता है। और अगर हम 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/> के लिए भयानक होगा जो हम क्वेरी पैराम के एक समूह में पास करते हैं जिसमें हमारी वर्तमान स्थिति होती है। (असल में, जैसा कि मैं लिख रहा हूं, मैं एक एचओसी लिंक बनाने की सोच रहा हूं जो निर्दिष्ट href पर जाना चाहिए और वर्तमान स्थिति के साथ एक क्वेरी ऑब्जेक्ट के साथ भेजना चाहिए, इसलिए मुझे प्रत्येक <Linke/> में राज्य वस्तु लिखने की आवश्यकता नहीं होगी, मैं इसे केवल एचओसी में ही संभालेंगे)