Redirection avec un composant React Router

J'ai un problème avec
https://github.com/andreypopp/ ... onent
. J'essaie de créer une bibliothèque
redirect

, qui fait rediriger "soft" /Équivalent à la transition par référence, contrairement à
window.location = ...

/, que je peux demander à la composante .jsx.

http://andreypopp.viewdocs.io/ ... tions
, Je dois juste être capable d'appeler
router.navigate/path/

, Rediriger.

Quand, par exemple , Je l'appelle sur la page
A

, url Dans la barre d'adresse change sur la page
B

optionnel. Cependant, page
A

Il suffit de redémarrer, laissant la chaîne d'adresse comme une page
B

, Et l'affichage comme une page
A

. Suggestions?
Invité:

Emilie

Confirmation de:

Vous devez être capable de résoudre ce problème avec l'aide d'un mélange de navigation.

Ensuite, vous pouvez utiliser
this.transitionTo

Avec le nom de votre page.


var PageAdd = React.createClass/{

mixins : [Router.Navigation],

handleSubmit : function/e/ {
e.preventDefault//;

this.transitionTo/'pages'/;

},

render: function // {
return /
<form onsubmit="{this.handleSubmit}">
<button classname="btn btn-default" type="submit">Submit</button>
</form>
/;
}
}/;


Lire la suite:
https://github.com/rackt/react ... on.md

Francis

Confirmation de:

En conséquence, nous avons fait une solution de pirate informatique: a causé ce qui suit lorsque la redirection devrait se produire où
path

- C'est quelque chose comme
/questions/23

.


// call an event to get the router from somewhere else that's listening
// to this event specifically to provide the router
document.dispatchEvent/new CustomEvent/'router.get', {
detail: {
callback: function/router/ {
router.navigate/path/;
}
}
}//;


Puis dans l'auditeur de routeur d'événements:


var App = React.createClass/{
listenForRouter: function listenForRouter // {

var self = this;
document.addEventListener/'router.get', function/e/ {
setTimeout/function// {
e.detail.callback/self
.refs.router
.refs.locations/;
}, 1/;
}/;
},

componentDidMount: function componentDidMount // {
this.listenForRouter//;
},

// additional lifecycle methods
}/;

Denis

Confirmation de:

Je ne sais pas que c'est vraiment la réponse à la question et la réponse a déjà été acceptée, mais j'utiliserais le lien de react-router:

Dans les itinéraires, vous définissez les noms /Cela vient de la page de la base de données musicale:


var routes = /
<route handler="{require/'./components/app'/}" name="app" path="/">
<defaultroute handler="{require/'./components/homePage'/}/">
<route handler="{require/'./components/artist/artistsPage'/}/" name="artist">
<route handler="{require/'./components/artist/artistsPage'/}/" name="artistSearch" path="artist/:artistSearchName">
<route handler="{require/'./components/artist/manageArtistSearchPage'/}/" name="artistSearchPage">
<route handler="{require/'./components/album/albumsPage'/}/" name="album">
<route handler="{require/'./components/album/albumsPage'/}/" name="searchAlbums" path="album/:artistId">
<route handler="{require/'./components/song/songsPage'/}/" name="song">
<notfoundroute handler="{require/'./components/pageNotFound'/}/">
</notfoundroute></route>
/;


Et ensuite dans votre référence de composant d'importation avec réact-routeur:


var Link = require/'react-router'/.Link; ///ES5/
import {link as Link} from 'react-router'; ///ES6/


Et puis vous pouvez l'utiliser comme étiquette et cela fonctionnera comme une étiquette a de href = "something"


<div>
<h1>Artist Search Page</h1>
<artistsearchform artistname="{this.state.artistName}" onchange="{this.onArtistChangeHandler}"></artistsearchform>
<br/>
<link classname="btn btn-default" params="{{artistSearchName:" this.state.artistname}}="" to="artistSearch"/>Search
</div>


Je l'ai également utilisé dans la liste pour faire le nom de l'artiste en vous référant à la page Albums.
</route></route></route></route></route></defaultroute></route>

Camille

Confirmation de:

Il n'est pas très bien documenté, mais vous pouvez effectuer une redirection douce à l'aide de la méthode.
navigate/path/

Objet
environment.defaultEnvironment

.


import {environment} from 'react-router-component'
...

environment.defaultEnvironment.navigate/"/"/;


Cependant, cela ne prend pas en compte le contexte de routage actuel. Il ne vous permettra donc pas de rediriger vers le chemin relatif aux routeurs internes. Par exemple, voir le contexte du routage, voir la section
https://github.com/STRML/react ... in.js
. Les mélanges ne sont pas une option pour ma solution, car j'utilise des cours ES6, Mais la mise en œuvre peut être copiée de là.

Pour répondre aux questions, connectez-vous ou registre