Redirecting with the React Router Component

Question

I have a problem with react-router-component . I am trying to create a redirect library that performs a soft redirect (equivalent to clicking a link, as opposed to window.location = ... ), which I can require from the .jsx component.

In the docs, I just need to call router.navigate(path) to redirect.

When, for example, I call this on page A , the url in the address bar changes to page B as desired. However, page A simply reloads, leaving the address bar as page B , and the display appears as page A Suggestions?

Answer 1

As a result, we created a hacker solution: we call the following when the redirection should occur, where path is something like /questions/23 .

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

Then, in the router, an event listener:

 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 }); 

Answer 2

You have to solve this problem with navigation mixing.

Then you can use this.transitionTo with the name of your page.

 var PageAdd = React.createClass({ mixins : [Router.Navigation], handleSubmit : function(e) { e.preventDefault(); this.transitionTo('pages'); }, render: function () { return ( <form onSubmit={this.handleSubmit}> <button type="submit" className="btn btn-default">Submit</button> </form> ); } }); 

More details: https://github.com/rackt/react-router/blob/master/docs/api/mixins/Navigation.md

Answer 3

Not sure if this is the answer to the question, and the answer is already accepted, but I would use the link from the reactor-router:

in the routes that you define the names (this is on the music database page:

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

and then in your component import Link from React-router:

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

and then you can use it as a tag and it will work as a tag with href = "something"

  <div> <h1>Artist Search Page</h1> <ArtistSearchForm artistName={this.state.artistName} onChange={this.onArtistChangeHandler} /> <br/> <Link to="artistSearch" params={{artistSearchName: this.state.artistName}} className="btn btn-default">Search</Link> </div> 

I also used it on the list to make the artist name a link to the album page.

Answer 4

This is poorly documented, but you can do a soft redirect using the navigate(path) method of the environment.defaultEnvironment object.

 import {environment} from 'react-router-component' ... environment.defaultEnvironment.navigate("/"); 

This does not take into account the current routing context, so it will not allow you to redirect to paths relative to internal routers. For an approach that takes into account the routing context, see NavigatableMixin . Mixins are not an option for my solution, since I use ES6 classes, but the implementation can be copied from there.