Material-ui: ListItem में लिंक है?

@TonyFrancis आपको ListItem में href विशेषता जोड़ने में सक्षम होना चाहिए।

@TonyFrancis को आपकी टिप्पणी

href को दस्तावेज़ में जोड़ने की आवश्यकता है

संपादित करें:
धत तेरे की! इस मुद्दे को #2243 पर संबोधित किया गया है। सामान्य रूप में; यह दस्तावेज़ीकरण से स्पष्ट नहीं है कि सभी उपलब्ध गुण क्या हैं। इसे प्रलेखित किया जाना चाहिए और निम्नलिखित कथन मदद नहीं करता है।
Other properties (no documented) are applied to the root element.
मैंने जीथब सूची कार्यान्वयन को देखा और मुझे एक कंटेनर घटक का उपयोग नहीं किया जा रहा है जिसमें containerElement संपत्ति है।

@TonyFrancis प्रतिक्रिया के आधार पर href पूरी तरह से आवश्यकता को पूरा नहीं करता है। यदि आप रिएक्ट राउटर का उपयोग कर रहे हैं, जिसकी संभावना है कि Link घटक कहाँ से आ रहा है तो आपको कुछ लाभ मिलते हैं जैसे कि basename निर्दिष्ट करने में सक्षम होना।

उदाहरण के लिए यदि आपके पास <Router basename='/my-app'> अपना ऐप लपेट रहा है तो

< ListItem primaryText = { <Link to="a" > as </Link> } />

उस basename को हर जगह ले जाने की आवश्यकता के बिना my-app/a लिंक होगा।

दस्तावेज मेरे लिए पर्याप्त स्पष्ट नहीं है। हम्म

ListItem . के लिए दस्तावेज़ में कोई href फ़ील्ड नहीं है

बस इसी में भाग गया। मैं इसका उपयोग कर रहा हूं और यह काम करता है:

<ListItem button component={Link} to='/some-url'>...</ListItem>

@mariotacke ^ यह कोड ul > a मार्कअप जेनरेट करता है, जो कि शब्दार्थ मान्य नहीं है, देखें https://github.com/mui-org/material-ui/issues/7956#issuecomment -362433602

संपादित करें: यह ठीक है यदि अभिभावक <nav> या component="nav" का उपयोग करता है

अब, आप इसे निम्न कोड के साथ बना सकते हैं:
```
प्राथमिक पाठ = "पाठ"
कंटेनर एलिमेंट = { }
/>
````

अरे @Glaadiss Tnx, यह काम करता है

@Glaadiss कि मार्कअप मुझे एक त्रुटि देता है:

Warning: React does not recognize the कंटेनर एलिमेंट prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase कंटेनर एलिमेंट instead. If you accidentally passed it from a parent component, remove it from the DOM element.

ऐसा इसलिए है क्योंकि मेरे पास रिएक्ट या एमयूआई का पुराना संस्करण है?

@renannobile जांचें कि क्या आप अपने किसी एक घटक में अनावश्यक {...props} रहे हैं। जब हम गाइड से कॉपी-पेस्ट करते हैं तो यह एक सामान्य गलती है :P

@Glaadiss मैं इसे 1.0.0-बीटा.44 पर उपयोग करने में सक्षम नहीं लगता

कोशिश की:

<List component="nav">
    <ListItem component={Link} to="/admin/user">
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

उपरोक्त मामला काम करता है लेकिन लहर प्रभाव के बिना और इसका परिणाम a में बच्चे के रूप में एक div के साथ होता है, जो कि अवैध है।

<List component="nav">
    <ListItem primaryText="Inbox" component={Link} to="/admin/user">
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

उपरोक्त मामला काम करता है लेकिन लहर प्रभाव के बिना और इसका परिणाम बिना किसी दृश्य पाठ के एक आइटम में होता है।

<List component="nav">
    <ListItem primaryText="Inbox" containerElement={<Link to="/admin/user" />}>
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

यह उपरोक्त मामला HTML में कंटेनर एलीमेंट के लिए एक [ऑब्जेक्ट ऑब्जेक्ट] विशेषता दिखाता है।

<List component="nav">
    <ListItem ContainerComponent={() => <Link to="/admin/user" />}>
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

<List component="nav">
    <ListItem ContainerComponent={Link to="/admin/user" />}>
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>



md5-7ff35357efa037d9c88356d4d3bf14ad



<List component="nav">
    <ListItem ContainerComponent={Link} ContainerProps={{ to: '/admin/user' }}>
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

आह! समाधान यह है।

<List component="nav">
    <ListItem component={Link} to="/admin/user" button>
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

@mschipperheyn यह काम करता है लेकिन यह लहर प्रभाव के साथ

हैलो, इसे ठीक से कैसे करें इस पर कोई अपडेट?

यह मेरे लिए काम करता है, जिसमें लहर भी शामिल है:

<ListItem button component={
  ({ children, ...props }) =>
    <Link to="/" {...props as LinkProps}>
      {children}
    </Link>
}>

निम्नलिखित दृष्टिकोण ने मेरे लिए काम किया, क्योंकि यह मूल शैली और फ्लेक्स व्यवहार को बनाए रखने में सक्षम है।

<ListItem component={props => (
  <ListItem button>
    <Link style={{
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0
    }}
    to={"/"}>
    </Link>
    {props.children}
  </ListItem>
)}>
    <ListItemIcon>
      <ArrowForwardIcon/>
    </ListItemIcon>
    <ListItemText primary="List Item" />
</ListItem>

Next.js उपयोगकर्ताओं के लिए:

<List component="nav">
  <Link href="/admin/resources" passHref>
    <ListItem component="a" button>
      <ListItemIcon>
        <InboxIcon />
      </ListItemIcon>
      <ListItemText primary="Resources" />
    </ListItem>
  </Link>
  ...

यह स्पष्ट लग सकता है - लेकिन अगर आपको <Link/> का उपयोग करने की आवश्यकता नहीं है और आप <a> उपयोग कर सकते हैं (यानी - आप जो एसपीए लिख रहे हैं उसके फायदे नहीं मिलते हैं) तो आप ऐसा कर सकते हैं :

<a href="/yourlink">
  <ListItem
    button
  >
    <ListItemText primary="Your Link Text" />
  </ListItem>
</a>

डिफ़ॉल्ट रूप से Eslint को rel="noopener noreferrer" आवश्यकता होगी यदि target="_blank"

              <List>
                <a
                  href="https://fb.me/xxxxxxxxx"
                  target="_blank"
                  rel="noopener noreferrer"
                  className={classes.hrefLink}
                >
                  <ListItem button>
                    <ListItemIcon>
                      <ThumbUp className={classes.icon32} />
                    </ListItemIcon>
                    <ListItemText primary="Visit our Facebook Page" secondary="@xxxxxxxxxx" />
                  </ListItem>
                </a>
              </List>

यह v4 के साथ काम करता है:

    <ListItem button to={to} component={Link}>
      {children}
    </ListItem>

यहाँ मेरा दृष्टिकोण है, अंतर्निहित Mui-selected वर्ग का उपयोग करते हुए:

<ListItem
  button
  component={NavLink}
  activeClassName={"Mui-selected"}
  to={"/some-url"}
  exact
>
  ...
</ListItem>

लिंक ListItem के साथ काम नहीं कर रहा है कृपया मुझे एंटोन की मदद करें

@ gautam751 कृपया अपना कोड या रेपो साझा करें, ताकि लोग आपकी मदद कर सकें

बस इसी में भाग गया। मैं इसका उपयोग कर रहा हूं और यह काम करता है:

<ListItem button component={Link} to='/some-url'>...</ListItem>

मेरे लिए काम किया, धन्यवाद
लेकिन वास्तव में मैं इसे इस तरह उपयोग करता हूं:

<ListItem button component={Link} to="/SomePath">
       ...
</ListItem>