Redirection with React Router Component

Question

I'm having a problem with react-router-component. I'm trying to make a redirect library that does a "soft" redirect (equivalent to clicking a link, as opposed to window.location = ...) that I can require from a .jsx component.

Per the docs I should just be able 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 as page A. Suggestions?

Can you add a sample of your code with the problem? It's difficult to debug given a text description of the problem. — Ross Allen, Aug 19 '14 at 17:49
Sure thing. [Code on pastebin](http://pastebin.com/9MtQ2jaT). Before the period was included in the link; sorry about that. — Logan Howard, Aug 21 '14 at 23:12

score 8 · Answer 1 · answered Jan 31 '15 at 18:19

8

You should be able to solve this using the Navigation mixin.

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

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

answered Jan 31 '15 at 18:19

Machiel

1,495
12
15

8

This answer is for react-router, not react-router-component. – Kris Wallsmith Feb 24 '15 at 23:31
2

You are completely right Kris, (love assetic btw, thanks). Guess I better delete this answer. My mistake :). – Machiel Feb 26 '15 at 14:45

score 2 · Accepted Answer · answered Jun 08 '15 at 20:26

We ended up doing a hacky solution: calling the following when a redirect should happen, where path is something like /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);
    }
  }
}));

Then, in the router, the 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
});

score 1 · Answer 3 · answered May 06 '16 at 22:58

Not sure if this really answers the question, and an answer has already been accepted but I would use link from react-router:

in the routes you define names (this from a 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 as the tag and it will work like an 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 in a list to make the artist name a link to there albums page.

score 0 · Answer 4 · answered Oct 23 '15 at 03:08

This is not well-documented, but it is possible to perform a soft redirect using the navigate(path) method of the environment.defaultEnvironment object.

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

environment.defaultEnvironment.navigate("/");

This doesn't take into account the current routing context though, so it won't allow you to redirect to paths relative to inner routers. For an approach that respects the routing context, see NavigatableMixin. Mixins are not an option for my solution, since I'm using ES6 classes, but the implementation could be copied from there.

Redirection with React Router Component

4 Answers4