Material-ui: ListItem hat einen Link ?

@TonyFrancis Sie sollten in der Lage sein, dem ListItem ein href Attribut hinzuzufügen.

@TonyFrancis Habe deinen Kommentar zu gitter und es hört sich so an, als hättest du das zum

href muss zum Dokument hinzugefügt werden

Bearbeiten:
Verdammt! Dieses Problem wird unter #2243 behandelt. Im Allgemeinen; Aus der Dokumentation geht nicht hervor, was alle verfügbaren Eigenschaften sind. Dies sollte dokumentiert werden und die folgende Aussage hilft nicht.
Other properties (no documented) are applied to the root element.
Ich habe mir die Implementierung von github List angesehen und sehe keine verwendete Containerkomponente containerElement Eigenschaft

Basierend auf der Antwort von @TonyFrancis erfüllt die href nicht vollständig den Bedarf. Wenn Sie einen Reaktionsrouter verwenden, von dem wahrscheinlich die Komponente Link stammt, erhalten Sie einige Vorteile, z. B. die Möglichkeit, einen basename anzugeben.

Wenn Sie beispielsweise <Router basename='/my-app'> Ihre App einpacken lassen, dann

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

würde zu my-app/a verlinken, ohne dass basename überall my-app/a werden müsste.

Die Dokumentation ist mir nicht klar genug. Hmmm

Es gibt kein href-Feld im Dokument für ListItem

Bin gerade darauf gestoßen. Ich benutze das und es funktioniert:

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

@mariotacke ^ dieser Code generiert ul > a Markup, das semantisch nicht gültig ist, siehe https://github.com/mui-org/material-ui/issues/7956#issuecomment -362433602

Bearbeiten: Es ist in Ordnung, wenn das Elternteil ein <nav> oder component="nav"

Jetzt können Sie dies mit folgendem Code erstellen:
```
primärText="Text"
containerElement={ }
/>
````

Hey @Glaadiss Tnx, es funktioniert

@ Glaadiss dieses Markup gibt mir einen Fehler:

Warning: React does not recognize the Containerelement prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase Containerelement instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Liegt das daran, dass ich eine veraltete Version von React oder MUI habe?

@renannobile Überprüfen Sie, ob Sie unnötige {...props} in einer Ihrer Komponenten übergeben. Es ist ein häufiger Fehler, wenn wir aus Anleitungen kopieren und einfügen :P

@Glaadiss Ich scheine das unter 1.0.0-beta.44 nicht verwenden zu können

Versucht:

<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>

Der obige Fall funktioniert, aber ohne den Welleneffekt und führt zu einem a mit einem div als Kind, was illegal ist.

<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>

Der obige Fall funktioniert jedoch ohne den Welleneffekt und führt zu einem Element ohne sichtbaren Text.

<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>

Dieser obige Fall zeigt ein [object Object]-Attribut für containerElement im 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>

Ahh! Die Lösung ist diese.

<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 das funktioniert, aber es

Hallo, irgendwelche Updates zur richtigen Vorgehensweise?

Das funktioniert für mich, einschließlich Ripple:

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

Der folgende Ansatz hat für mich funktioniert, da er in der Lage ist, den ursprünglichen Stil und das Flexverhalten beizubehalten.

<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>

Für Next.js-Benutzer:

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

Dies mag offensichtlich erscheinen - aber wenn Sie <Link/> nicht verwenden müssen und <a> (dh - Sie erhalten nicht die Vorteile des SPA, das Sie schreiben), können Sie dies tun :

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

Standardmäßig sollte Eslint rel="noopener noreferrer" erfordern, wenn 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>

Das funktioniert mit v4:

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

Hier ist mein Ansatz mit der integrierten Mui-selected Klasse:

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

Link funktioniert nicht mit ListItem Bitte helfen Sie mir antone

@gautam751 teile bitte deinen Code oder dein Repo, damit die Leute dir helfen können

Bin gerade darauf gestoßen. Ich benutze das und es funktioniert:

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

Hat für mich funktioniert, danke
aber eigentlich benutze ich es so:

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