web-dev-qa-db-fra.com

React-Router ouvre le lien dans un nouvel onglet

Est-il possible d'obtenir React Router d'ouvrir un lien dans un nouvel onglet? J'ai essayé cela et cela n'a pas fonctionné.

<Link to="chart" target="_blank" query={{test: this.props.test}} >Test</Link>

Il est possible de le bouger en ajoutant quelque chose comme onClick="foo" au lien, comme ce que j'ai ci-dessus, mais il y aurait une erreur de console. 

Merci.

reactjsreact-router
22
mcd

Je pense que le composant Link n'a pas les accessoires nécessaires.

Vous pouvez avoir un moyen alternatif en créant une balise et en utilisant la méthode makeHref de Navigation mixin pour créer votre URL

<a target='_blank' href={this.makeHref(routeConsts.CHECK_DOMAIN, {},
   { realm: userStore.getState().realms[0].name })}>
        Share this link to your webmaster
</a>
12
user1369825

Dans la version actuelle de React Router, vous pouvez utiliser:

<Link to="route" target="_blank" onClick={(event) => {event.preventDefault(); window.open(this.makeHref("route"));}} />
21
hydRAnger

Nous pouvons utiliser les options suivantes: -

 // first option is:-
    <Link to="myRoute" params={myParams} target="_blank">

 // second option is:-
    var href = this.props.history.createHref('myRoute', myParams);
    <a href={href} target="_blank">

 //third option is:-
    var href = '/myRoute/' + myParams.foo + '/' + myParams.bar;
    <a href={href} target="_blank">

Nous pouvons utiliser l’une des trois options pour ouvrir un nouvel onglet en réagissant au routage.

12
jack

À partir de react_router 1.0, les accessoires seront transmis à la balise anchor. Vous pouvez directement utiliser target="_blank". Discuté ici: https://github.com/ReactTraining/react-router/issues/2188

8
dexter

Pour un lien externe, utilisez simplement une ancre à la place de Link: 

<a rel="noopener noreferrer" href="http://url.com" target="_blank">Link Here</a>
1
Anthony Agbator

Le moyen le plus simple est d’utiliser la propriété 'to':

<Link to="chart" target="_blank" to="http://link2external.page.com" >Test</Link>
0
Bob Slave