Next.js: स्टाइल घटक के रूप में लिंक करें

क्रोम में href विशेषता के बिना a टैग का उपयोग करते समय मुझे सटीक समस्या थी। इसे एक लिंक के रूप में स्टाइल नहीं किया गया है और इसमें नियमित लिंक की ब्राउज़र एक्सेसिबिलिटी विशेषताएं नहीं हैं। जो काम किया वह a टैग पर एक खाली href का उपयोग कर रहा था।

इसका अनुभव भी कर रहे हैं।

वैकल्पिक हल के लिए यह शायद एक बेहतर विचार है कि href को रिक्त के बजाय दूसरी बार शामिल किया जाए। अगर केवल ब्राउज़र यूआरएल पूर्वावलोकन के लिए।

आप एक टैग का उपयोग करने के बजाय एक घटक को स्टाइल घटकों को पास कर सकते हैं
https://github.com/styled-components/styled-components#third -party-components

import Link from 'next/link'
const StyledLink = styled(Link)`
  color: red;
  background: blue;
`

इसका इस्तेमाल करें

export default () => (<div><StyledLink href="mylink">MyText</StyledLink></div>)

धन्यवाद @kennylavender , कोशिश करेंगे!

@sedubois ने वह काम किया? आप क्लासनाम को लिंक पर पास नहीं कर सकते हैं, इसलिए मुझे नहीं लगता कि यह काम करेगा

@luisrudge ने अभी तक कोशिश नहीं की है, अभी वर्कअराउंड काफी अच्छा था और मैं यह देखने के लिए एक बार और कोशिश करूंगा कि क्या मैं सीधे स्टाइल-जेएसएक्स का उपयोग कर सकता हूं ...

यदि आप पुष्टि करते हैं कि यह काम नहीं करता है तो मुझे बताएं और इसे फिर से खोल सकते हैं।

@sedubois मैं पुष्टि कर सकता हूं कि @kennylavender का समाधान काम नहीं करता है। मैं इस मुद्दे को फिर से खोलने की सलाह दूंगा।

nextjs लिंक घटक को इसका समर्थन करने की अनुमति देने के लिए एक पुल अनुरोध किया जा सकता है या आप अपना खुद का संस्करण nextjs लिंक घटक बना सकते हैं जो स्टाइल घटकों के साथ काम करता है। लिंक कोड को देखे बिना ऐसा लगता है कि यह एंकर तत्व के माध्यम से किसी भी प्रोप को पारित नहीं कर रहा है।

आप nextjs राउटर आयात करके अपना खुद का बना सकते हैं और फिर स्टाइल घटकों को घटक को स्टाइल करने की अनुमति दे सकते हैं https://www.styled-components.com/docs/basics#styling -any-components

यहां एक त्वरित उदाहरण है, मैंने केवल इस कोड को यहां सीधे लिखा है और इसका परीक्षण नहीं किया है, इसलिए इसे केवल एक उदाहरण के रूप में उपयोग करें।

// my-app-link.js
import React from 'react'
import PropTypes from 'prop-types' // Import this from react if your using an older version.
import Router from 'next/router'

const handler = (href) => Router.push(href);

const Link = ({className, children, href, ...rest}={}) => (
  <a onClick={() => handler(href)} className={className} {...rest} >{children}</a>
);

Link.propTypes = {
  className: PropTypes.string,
  href: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.string,
  ]),
  children: PropTypes.node,
}

export default Link;

अच्छा दृष्टिकोण @kennylavender लेकिन मुझे नहीं लगता कि यह काफी अच्छा है, क्योंकि आप href विशेषता प्रदान नहीं कर रहे हैं (आप इसके बजाय onClick ईवेंट का उपयोग कर रहे हैं)। तो... SEO के लिए यह तरीका कितना अच्छा है? अन्य विकल्प?

यह सिर्फ एक उदाहरण है आपको इसे और आगे ले जाना चाहिए। आप मेरे द्वारा पोस्ट किए गए कोड के ऊपर एक href विशेषता जोड़ सकते हैं और निश्चित रूप से जोड़ना चाहिए। यह कैसे करना है, इसका अंदाजा लगाने के लिए नेक्स्टज/लिंक कैसे लागू किया जाता है, इस पर एक नज़र डालें।

हे लोगों। संस्करण 3.0.1-beta.13+ पर, आप $ Link href से styled-components (या किसी भी अन्य पुस्तकालय जो इसके <a/> टैग)।

मुद्दे के पहले उदाहरण का उपयोग करना: इसे इस तरह से किया जा सकता है:

const StyledLink = styled.a`
  color: red;
  background: blue;
`

export default ({ href, name }) => (
  <Link prefetch href={href} passHref>
    <StyledLink>{name}</StyledLink>
  </Link>
)

एफवाईआई: यदि आप next-routes का उपयोग कर रहे हैं तो यह इस तरह दिखेगा:

export default ({route, params, children}) => (
  <Link route={route} params={params} passHref>
    <StyledLink>{children}</StyledLink>
  </Link>
)

बेहतर @vjpr समाधान, className प्रोप को सीधे हमारे Link पर छोड़कर, ताकि हम उनकी शैलियों को सही दायरे में बढ़ा सकें:

Link.js

export default ({ route, params, children, className }) => (
  <Link route={route} params={params} passHref>
    <StyledLink className={className}>{children}</StyledLink>
  </Link>
)

अन्यघटक.जेएस

import Link fron 'components/Link';

const RedLink = styled(Link)`
  background-color: red;
`

@torresandres का थोड़ा बेहतर संस्करण, घटक के अंदर लिंक को स्टाइल करना ताकि हमें प्रत्येक घटक में एक स्टाइल घटक बनाने की आवश्यकता न हो जिसे हम Link में आयात करते हैं।

Link.js

const StyledLink = styled.a`
  //styles
`
export default ({ route, params, href, children, className }) => (
  <Link route={route} params={params} href={href} passHref>
    <StyledLink className={className}>{children}</StyledLink>
  </Link>
);

अन्यघटक.जेएस

<Link href="/">Login</Link>

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

जवाब मिल गया!
https://github.com/zeit/next.js/pull/1642#issuecomment -292431043

लोगों के लिए स्टाइल-घटकों के साथ लिंक की शैली को कैसे बदलना चाहते हैं

const LinkItem = styled(Link)`
// your style
`;

तो आप इस तरह उपयोग कर सकते हैं <LinkItem to="/yourComponent">somthing</LinkItem>

मुझे यह पता लगाने में कुछ समय लगा इसलिए मैं एक TLDR लिखूंगा

TLDR अपने <Link> टैग में passHref जोड़ें और इसके अंदर अपने इच्छित स्टाइल घटकों को शामिल करें

व्यावहारिक उदाहरण
मूल घटक में:

<Link href="/login" passHref>
          <TopbarLink>Login</TopbarLink>
</Link>

टॉपबारलिंक को परिभाषित करने वाली स्टाइल वाली घटक फ़ाइल में:

export const TopbarLink = styled.a`
// your style
`;

@ ferrucc-io आपका उदाहरण एंकर के भीतर एंकर को लपेटता है। और सामान्य रूप से आपको लिंक को पोजिशन करने की भी आवश्यकता हो सकती है। जो प्रारंभिक समस्या को अपनी आंतरिक समस्या के रूप में लाता है जिसे स्टाइल किया जाता है।