मैं उस यूआरएल के आधार पर पाद लेख में एक पी टैग दिखाना/छिपाना चाहता हूं।

मैंने इसे विकास मोड में किया और इसने काम किया:

{acf2.texto_2_rodape_coluna_2.length > 0  && window.location.href.indexOf("mydomain")? (
              <>
                <p className="contact">
                <HiCursorClick/> <Link to={acf2.link_call_1} style={{ fontWeight: '600' }}>
                    {acf2.texto_2_rodape_coluna_2}
                  </Link>
                </p>
              </>
            ) : null}

            {acf2.texto_3_rodape_coluna_2.length > 0 && !window.location.href.indexOf("mydomain/")? (
              <p className="contact">
              <AiTwotoneVideoCamera/> <Link to={acf2.link_to_action_2} style={{ fontWeight: '600' }}>
                  {acf2.texto_3_rodape_coluna_2}
                </Link>
              </p>
            ) : null}

विकास मोड में यह काम करता है, लेकिन जब मैं netlify करने के लिए भेजता हूं तो यह त्रुटि होती है:

त्रुटि: सर्वर साइड रेंडरिंग के दौरान "विंडो" उपलब्ध नहीं है।

वेबपैक त्रुटि: संदर्भ त्रुटि: विंडो परिभाषित नहीं है

1
Ricardo de Paula 15 अक्टूबर 2020, 19:51

1 उत्तर

सबसे बढ़िया उत्तर

सबसे पहले, आप सर्वर-साइड (एसएसआर) में window ऑब्जेक्ट का उपयोग कर रहे हैं, जहां इसकी अनुमति नहीं है क्योंकि gatsby develop ब्राउज़र-साइड पर होता है लेकिन gatsby build (नेटलिफाई डिप्लॉयमेंट भी) होता है सर्वर जहां वैश्विक वस्तुएं जैसे window या document अभी तक परिभाषित नहीं हैं (स्पष्ट कारणों से)।

गैट्सबी में, क्योंकि यह @reach/router (रिएक्ट से) तक फैला हुआ है, आप एक prop नाम location (केवल पृष्ठों में उपलब्ध है लेकिन आप किसी भी बच्चे को पास कर सकते हैं) वैश्विक वस्तुओं तक पहुंच के बिना सभी वांछित जानकारी के साथ। आपके मामले में:

{acf2.texto_2_rodape_coluna_2.length > 0  && location.pathname.includes('mydomain')? (
              <>
                <p className="contact">
                <HiCursorClick/> <Link to={acf2.link_call_1} style={{ fontWeight: '600' }}>
                    {acf2.texto_2_rodape_coluna_2}
                  </Link>
                </p>
              </>
            ) : null}

            {acf2.texto_3_rodape_coluna_2.length > 0 && !location.pathname.includes('mydomain')? (
              <p className="contact">
              <AiTwotoneVideoCamera/> <Link to={acf2.link_to_action_2} style={{ fontWeight: '600' }}>
                  {acf2.texto_3_rodape_coluna_2}
                </Link>
              </p>
            ) : null}

यदि आप अपने प्रारंभिक दृष्टिकोण का उपयोग करना चाहते हैं, तो आपको यह सुनिश्चित करने की ज़रूरत है कि विंडो को दस्तावेज़ीकरण के रूप में परिभाषित किया गया है:

if (typeof window !== `undefined`) {
  //your statement
}

आपके कोड पर लागू:

{typeof window !== 'undefined' && acf2.texto_2_rodape_coluna_2.length > 0  && window.location.href.indexOf("mydomain")? (...)

बेशक, इसकी अनुशंसा नहीं की जाती है क्योंकि आपके पास location का उपयोग करने वाला मूल दृष्टिकोण है, और क्योंकि कोड पठनीयता के मामले में टर्नरी स्थितियों का पीछा करना सबसे अच्छा विकल्प नहीं है।

2
Ferran Buireu 15 अक्टूबर 2020, 21:25