web-dev-qa-db-fra.com

J'essaie de faire mon lien Material-UI RaisedButton vers une URL externe sans succès?

Comme la question dans l'état du titre.

Jouer avec react, react-router et material-ui et en un seul endroit, je veux faire un bouton d'action dans un lien de composant de carte vers une URL externe, comme sans succès.

Je pense actuellement à ajouter un gestionnaire d'événements pour utiliser window.open, mais ce doit être une manière plus intelligente?

J'ai trouvé une solution, avant que le code ne ressemble à ceci.

<CardActions>
   <RaisedButton
       href={this.props.url}
       label="OK"
   />
</CardActions>

La solution était très simple:

<CardActions>
   <a href={this.props.url} target="_blank">
     <RaisedButton
        label="OK"
     />
   </a>
</CardActions>
reactjsreact-routermaterial-ui
17
HenrikGr

Si nous ajoutons un lien externe dans le lien react-router ou le bouton material-ui, il est important d'ajouter "http: //" (ou https: //) dans l'url externe. le lien ne fonctionnera pas sans ajouter http.

MAUVAIS CODE -

<Link target="_blank" to='www.google.com'>Google</Link>

puis rediriger le lien

localhost:3000/www.google.com

CODE DROIT -

Si nous voulons rediriger avec react-router Link, voici un exemple de code -

<Link target="_blank" to='http://www.google.com'>Google</Link>

Si nous voulons rediriger avec Material-ui Button, voici un exemple de code -

<Button target="_blank" href="http://www.google.com/">Google</Button>
19
Arpit

Vous pouvez envelopper <RaisedButton /> en <Link /> composant pour le routage interne.

<Link to={this.props.cardItem.resourceUrl}>
  <RaisedButton label="Ok" />
</Link>

Et enveloppez-vous dans un simple <a> tag pour externe:

<a href={this.props.cardItem.resourceUrl}>
  <RaisedButton label="Ok" />
</a>
10
Alexandr Lazarev