मुझे भी। यदि मुझे इस तरह से कस्टम घटक का उपयोग करने में त्रुटि हो रही है:

        <Link href="/href">
          <Button
            type="custom"
            color="#FCFCFC"
          >
             buttonText
          </Button>
        </Link>

यह केवल तब हो रहा है जब आप एक घटक को एक बच्चे के रूप में उपयोग करते हैं। ये उदाहरण के लिए चेतावनी नहीं देते हैं:

        <Link href="/href">
          <button
            type="custom"
            color="#FCFCFC"
          >
            buttonText
          </button>
        </Link>

        <Link href="/href">
          <a>
            <Button
              type="custom"
              color="#FCFCFC"
            >
              buttonText
            </Button>
          </a>
        </Link>

क्या इस बग के आसपास कोई रास्ता है? हम इसे 9 के लिए जाने से रोक रहे हैं, जब कुछ विशेषताएं हम वास्तव में टाइपस्क्रिप्ट सहायता का लाभ उठाना चाहेंगे। बस ध्यान दिया यह 9.0.3 करने के लिए टक्कर: /

आप इसे अस्थायी रूप से बदलने की कोशिश कर सकते हैं, जैसे:

// TODO: Muting error, fix as soon as zeit/next.js/issues/7915 resolved
const originalError = console.error;

console.error = (...args) => {
  if (/Warning.*Function components cannot be given refs/.test(args[0])) {
    return;
  }
  originalError.call(console, ...args);
};

मैं यहाँ एक ही मुद्दा रहा हूँ।

यदि आप अपने कस्टम घटक को लपेटने के लिए <Link/> का उपयोग करते हैं, तो आप ref को इस तरह अग्रेषित कर सकते हैं:

const CustomComponent = React.forwardRef(function CustomComponent(props, ref) {
  return (
    <div/>
  );
});

<Link href={"/"}>
  <CustomComponent/>
</Link>

चेतावनी देकर चला जाता है।

मैंने 9.0.4-canary.2 अपडेट किया है लेकिन मुझे अभी भी कंसोल पर चेतावनी मिलती है। क्या मैं कुछ भूल रहा हूँ?

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Link`.

@ th0th आपको अपने घटक को React.forwardRef में लपेटना चाहिए। इस तरह:

import React from 'react'
import Link from 'next/link'

const CustomComponent = React.forwardRef((props, ref) => (
  <a ref={ref} {...props}>
    Click
  </a>
))

export default () => (
  <Link href='/' passHref>
    <CustomComponent/>
  </Link>
)

Link मैन्युअल रूप से उपयोग किए जाने वाले सभी कार्यात्मक घटकों को लपेटें? क्या इसके लिए एक आसान, कम दोहराव वाला समाधान नहीं होना चाहिए? कम से कम <Link href="/" forwardRef>...</Link> जैसा कुछ?

@Nickluger से सहमत यह काउंटर-सहज ज्ञान युक्त लगता है।

क्या अन्य सभी पुस्तकालयों को उसी तरह forwardRef विशेषता को लागू करना चाहिए? या शायद रचनाकारों ने प्रतिक्रिया दी कि डेवलपर्स forwardRef विशेषता को लागू करने के बजाय React.forwardRef फ़ंक्शन का उपयोग करेंगे?

हां @nickluger से सहमत Link अंदर सभी घटकों के लिए मैन्युअल रूप से ऐसा करने के लिए एक दर्द है।

क्या हमें इस मुद्दे (@ijjk) को फिर से खोलना और नाम बदलना चाहिए या किसी ने पहले से ही एक नया खोल दिया है?

मुझे भी। यदि मुझे इस तरह से कस्टम घटक का उपयोग करने में त्रुटि हो रही है:

        <Link href="/href">
          <Button
            type="custom"
            color="#FCFCFC"
          >
             buttonText
          </Button>
        </Link>

यह केवल तब हो रहा है जब आप एक घटक को एक बच्चे के रूप में उपयोग करते हैं। ये उदाहरण के लिए चेतावनी नहीं देते हैं:

        <Link href="/href">
          <button
            type="custom"
            color="#FCFCFC"
          >
            buttonText
          </button>
        </Link>

        <Link href="/href">
          <a>
            <Button
              type="custom"
              color="#FCFCFC"
            >
              buttonText
            </Button>
          </a>
        </Link>

यह सबसे अधिक संभावना एक कंसोल त्रुटि को फेंक देगा:

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

जब मैं नेक्स्ट जेएस को अपग्रेड कर रहा था तो मैंने इस मुद्दे को मारा। क्या रास्ते में कोई फिक्स है?

मुझे यकीन नहीं है कि मैं समझता हूं कि फॉरवर्ड रीफ का उपयोग कैसे करें और मेरे घटक को लपेटें। मेरा बटन। Js फ़ाइल वर्तमान में निम्न निर्यात करता है ...।

const Button = (props) => {
    return (<stuff />)
}

export default React.memo(Button)

ऊपर देखें, मैंने यहां एक अनुवर्ती खोला: https://github.com/zeit/next.js/issues/8962

जब मैं नेक्स्ट जेएस को अपग्रेड कर रहा था तो मैंने इस मुद्दे को मारा। क्या रास्ते में कोई फिक्स है?

मुझे यकीन नहीं है कि मैं समझता हूं कि फॉरवर्ड रीफ का उपयोग कैसे करें और मेरे घटक को लपेटें। मेरा बटन। Js फ़ाइल वर्तमान में निम्न निर्यात करता है ...।

const Button = (props) => {
    return (<stuff />)
}

export default React.memo(Button)

इस मामले में, आपको बस करने में सक्षम होना चाहिए

import {forwardRef} from 'react';
const Button = forwardRef(props, ref) => {
    return (<stuff ref={ref} />)
}

आगे के भाग के लिए। डॉक्स ने https://nextjs.org/docs#forcing -the-link-to-expose-href-to-its-child का भी उल्लेख किया है, हालाँकि मैंने यह कोशिश नहीं की है। मैंने पाया है कि यह कर रहा है

            <Link
              href={href}
            >
              <a>
                {text}
              </a>
            </Link>

काम करता है (बहुत विषम दिखने के बावजूद।)

9.0.2 में इस मुद्दे का सामना करना

<a></a> का उपयोग करके काम हो सकता है, लेकिन a11y और समान का उपयोग करते समय अन्य त्रुटि जैसे "href है चाहिए", आदि को ट्रिगर करेगा।

संपादित करें: 15mn को यह पता लगाने की कोशिश में बिताया, यह बहुत उबाऊ है, इस तरह की बर्बादी, और चेतावनी के बावजूद ठीक से व्यवहार करना लगता है।

व्यक्तिगत रूप से, https://github.com/zeit/next.js/issues/7915#issuecomment -511792629 पर जाना बहुत आसान है।

एक असर आवरण के रूप में एक प्रतिक्रिया टुकड़े का उपयोग करके इस समाधान के बारे में क्या?

import React, { Fragment, useRef } from 'react';
import { MyFunctionalComponent } from './my-functional-component';

const App = props => {
  const myRef = useRef();

  return ( 
    <Link href={href}>
      <Fragment>
          <MyFunctionalComponent ref={myRef} />
      </Fragment>
    </Link>
  );
}

जहाँ <MyFunctionalComponent> फॉरवर्ड रेफरी:

import React, { forwardRef } from 'react';

const MyFunctionalComponent = forwardRef(props, ref) => (
  <div ref={ref} />
);

यह आउटपुट में कोई अतिरिक्त HTML रैपर नहीं जोड़ता ( <div /> ) और इससे संबंधित कोई त्रुटि ट्रिगर नहीं होनी चाहिए।

@ Hill84 दिलचस्प है, लेकिन आपके उदाहरण में myRef कहाँ से आता है?

@Vadorequest मैंने अपनी पिछली टिप्पणी में और विवरण जोड़ दिए हैं।

@ Hill84 के सुझाव के बाद एक अच्छा समाधान था:
`` `
const ButtonLink: एफसी= ({बच्चे, href, ... प्रॉप्स}) => (
< >>);

@ Hill84 के सुझाव के बाद एक अच्छा समाधान था:

const ButtonLink: FC<ButtonLinkProps> = ({ children, href, ...props }) => (
  <Link href={href}>
    <><Button link {...props}>{children}</Button></>
  </Link>
);

मैं <><Component/></> उपयोग करता हूं, लेकिन लिंक कार्रवाई नहीं कर सकता। मुझे इसके बजाय <div></div> उपयोग करना होगा।

मैं एक समाधान का सुझाव देता हूं जहां एक घटक के बजाय एक फ़ंक्शन प्रॉपर के साथ एक वस्तु देता है:

const propsUserBtn = user => ({
    className: "h-10 w-10 font-black rounded-full bg-orange-200 text-teal-700",
    title: user.first_name + ' ' + user.last_name,
    children: (user.first_name.charAt(0) + user.last_name.charAt(0)).toUpperCase()
})

<Link href='/profile'>
    <button { ...propsUserBtn(user) } />   
</Link>

जाँच की, यह काम करता है!

क्यों इस रेफरी की जरूरत है? क्या यह अंतर्निहित लिपटे घटक में href के सही स्थान की गारंटी देने के लिए है जब passHref का उपयोग <Link /> ?

यह सुपर कष्टप्रद है क्योंकि मेरे कस्टम घटक के मूल में <a> और मैं देख सकता हूं कि इसे वैसे भी सही ढंग से लागू किया जा रहा है ... मैं बहुत अधिक है बल्कि यह लागू किया है कि आपको अपने अंतर्निहित कस्टम घटक की आवश्यकता है जड़ में लंगर है और इस पूरे ref डिजाइन से बचें।

React.forwardRef लोगों को लागू करने के लिए मजबूर करने के लिए एक भयावह बोझिल चीज है और मेरे लिंटर के साथ नरक खेल रहा है #

या यदि आपके घटक में href का स्थान निर्दिष्ट करने की आवश्यकता है, तो कम से कम यह एक विकल्प है। <Link href="/" passHref useRef /> ?

मुझे नहीं लगता कि कस्टम घटक को रेफरी को अग्रेषित करने के लिए एक और मॉड्यूल बनाना एक अच्छा समाधान है और यह बहुत दोहरावदार भी है।

जिस तरह से मैं इस मुद्दे को संभालने के लिए उपयोग कर रहा हूं वह कस्टम घटक को div तत्व के साथ @ namlq93 द्वारा सुझाया गया है

मुझे भी। यदि मुझे इस तरह से कस्टम घटक का उपयोग करने में त्रुटि हो रही है:

        <Link href="/href">
          <Button
            type="custom"
            color="#FCFCFC"
          >
             buttonText
          </Button>
        </Link>

यह केवल तब हो रहा है जब आप एक घटक को एक बच्चे के रूप में उपयोग करते हैं। ये उदाहरण के लिए चेतावनी नहीं देते हैं:

        <Link href="/href">
          <button
            type="custom"
            color="#FCFCFC"
          >
            buttonText
          </button>
        </Link>

        <Link href="/href">
          <a>
            <Button
              type="custom"
              color="#FCFCFC"
            >
              buttonText
            </Button>
          </a>
        </Link>

यह काम करता है, धन्यवाद दोस्त !!

एक समान मुद्दा रहा हूँ

अभी तक वहीँ

https://nextjs.org/docs/api-reference/next/link#if -the-child-is-a-function-Components

यह दुख की बात है।

मैं अगले दिन कॉन्फ्रेंस देख रहा था कि दूसरे दिन "वाह नेक्स्ट इज द फ्यूचर" सोच रहा था। मैं वास्तव में नेक्स्ट और वर्सेल इकोसिस्टम को पसंद करता हूं और मैं ईमानदारी से यह कहना चाहता हूं कि अगले के लिए एक वकील बनो। हालाँकि, इन्हें बंद किए जाने और संबोधित नहीं किए जाने जैसे मुद्दों से ऐसा करना मुश्किल हो जाता है। मैंने इस तरह के पैटर्न को कई बार पूरे मुद्दों पर देखा है, विशेष रूप से राउटर के साथ।

उपयोगकर्ता की ओर से इस समस्या के 3 समाधान हैं और उनमें से कोई भी महान डीएक्स नहीं है।

1. अनुशंसित तरीका React.forwardRef। घटक को React.forwardRef में लपेटें। यह बहुत दोहराव हो सकता है
2. div , span , a , आदि जैसे टैग में कार्यात्मक घटक लपेटें
3. लिंक के बजाय, उपयोग करें राउटर में खींचें और router.push उपयोग करें

कोई फर्क नहीं पड़ता कि आप किस समाधान का उपयोग करते हैं, वे सभी अजीब हैं और इस मुद्दे से जुड़े टिप्पणियों की आवश्यकता होती है या सहकर्मियों / योगदानकर्ताओं को यह बताने के लिए डॉक्स की आवश्यकता होती है कि आकस्मिक हटाने / सफाई को रोकने के लिए इसकी आवश्यकता क्यों है।

मुझे लगता है कि इस मुद्दे को चर्चा के लिए फिर से खोलना चाहिए।