React-router: How to redirect to another route programmatically

[camsong]

I have an <input /> with a handler on 'enter' key up event handler.
How can I redirect to /app?keyword=[input_value] in that event handler.

[hakanderyal]

var transitionTo = Router.transitionTo;

transitionTo('your_route_name', query={keyword: input_value});

[camsong]

This works like a charm :clap: , thanks @hakanderyal . I should always RTFM https://github.com/rackt/react-router/blob/master/docs/api/Router.md#transitiontoroutenameorpath-params-query

[ryanflorence]

Note this is different in v0.8.0, check out the upgrade guide:

https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md#07x---08x

[lesterzone]

Wondering how to get this to work with v0.12.0

[gaearon]

@lesterzone Use Navigation mixin. https://github.com/rackt/react-router/blob/master/docs/api/mixins/Navigation.md#transitiontoroutenameorpath-params-query

[lesterzone]

Thanks @gaearon that's what I'm trying.
but it's _A mixin for components_
I want to router.redirectTo('home') after an ajax call on my Flux utils. Maybe I'm missing something.

[gaearon]

@lesterzone https://github.com/rackt/react-router/blob/master/docs/guides/flux.md

[lesterzone]

Thanks again @gaearon I knew I was missing something.
Just as reference:

// router.js
'use strict';

var _router;

module.exports = {
    get: function() {
        return _router;
    },

    set: function(router) {
        _router = router;
    }
};

// app.js
// a bunch of things here :D
var routes = require('./routes');
var RouterContainer = require('./router');

RouterContainer.set(Router.create({
    routes: routes
}));

// someUtils.js
var router = require('../router');
router.get().transitionTo('home');

:tada: :tada:

[captDaylight]

@lesterzone I tried your approach, but after I successfully log in, I call:

router.get().transitionTo('account')

it sets the url like this with a hashbang:

http://localhost:5000/login#/account

as opposed to

http://localhost:5000/account

[lesterzone]

I'm not sure why,
I'll like to share a snippet of code about my routes, maybe it can help you:

var routes = (
  <Route name="app" path="/" handler={App}>
    <Route name="home" handler={Home}/>

    <Route name="entities" handler={Entities}></Route>

    <DefaultRoute handler={Home}/>
  </Route>
);

[captDaylight]

Hm, yeah I have something similar. Thanks, I'll keep digging.

[01AutoMonkey]

@captDaylight did you figure out a solution to the hashbang problem? I'm getting the same issue.

[ElsewhereGames]

@captDaylight @01AutoMonkey I ran into this issue as well, and I was able to resolve it by using the router returned from Router.run instead of creating a separate router using Router.create.

[couzic]

Just pointing to the latest entry in the upgrade guide

https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md#navigation-mixin

[regou]

@micouz how to navigate now? the link not valid

[knowbody]

@regou https://github.com/rackt/react-router/blob/master/CHANGES.md#navigation-mixin

[vevo-kurt-snyder]

Anyone know the current doc for doing this? The latest link points to an obsolete hash tag.

[knowbody]

@vevo-kurt-snyder here it is: https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#programmatic-navigation

please use GH search next time, before commenting on the outdated issues.

[davedx]

This is crazy, the documentation is terrible when describing something as basic as navigating programmatically. The link you post still doesn't make sense to me, my component gets a 'history' not a 'router' passed into its props (v2), so I still have no idea from the docs how to do basic navigation in my code.

If the documentation was better people wouldn't need to comment on old Github issues. So frustrating.

[taion]

We have a very succinct guide on this: https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md

The history prop, if you still receive it, is deprecated, as you should be able to see from the deprecation warnings you receive on attempting to use it.

[davedx]

I was inside a top-level component mounted into my react-router route (v2). I had a 'history' object passed into the component's props, not a 'router' object.

Also, in the article you posted: what is "withRouter"? The guide you posted doesn't explain that either. :(

It's a shame. I've worked on a large project with react-router, and I know how powerful it is. But the documentation is sprawling and difficult to understand.

[finaiized]

Had some trouble with this too. Seems like the API for changing history has changed a lot over the past few versions.

The simplest way I found to navigate between routes that should work for >v2 and tested on v2.4.1 (within components or without) is

import { hashHistory } from 'react-router';

// Triggered somewhere
hashHistory.push('/route');

Replace hashHistory with browserHistory if you used that when initializing the Router. This is the method specified at the above link.

The newer method, for >v2.4, is that you can use withRouter that (afaik) automatically injects the router into a component's props (see here).

[lbossle]

Is it possible to pass props using this method?

[biphobe]

@finaiized You shouldn't directory use history object, use router object passed via context when possible.

contextTypes: {
  router: React.PropTypes.object.isRequired
}

this.context.router.push(path)
this.context.router.push({ pathname, query, state })

this.context.router.replace(path)
this.context.router.replace({ pathname, query, state })

As in docs.

@Dedpul You can pass whatever you want as _state_.

[TeemuKoivisto]

Say what you want but the docs are _bad_ and confusing. To stop the user from ever even visiting a page thus not causing any unwanted API-calls happening the best method I found is to put a middleware function to route's onEnter -property and check if user is logged in / has required privileges. Not so easy to just "read the docs" and know what to do. So I have route like this:

<Route path="user/me" component={UserShow} onEnter={redirectNonUser} />

And then middleware function like this:

export const redirectNonUser = (nextState, replace) => {
  const user = store.getState().get("auth").get("user").toJS();
  if (user.role === undefined) {
    replace({
      pathname: "/login",
    });
  }
};

Which works but was way too hard to figure out and I think the hackiness still shows and it still feels to me a bit ambiguous

[clord]

@biphobe, there are times when you have to directly change history object, for example outside of the component hierarchy while responding to an async event from a web socket or a web worker. I don't want to have to marshal that event into the component tree. I'd rather just trigger the navigation and have react-router deal with which components need to be on-screen. That said, almost all the time the router in context should be used if possible.

[biphobe]

@clord I agree with you, I didn't mean to deprecate any kind of usage of history object from the outside of React component, I just wanted to note that it should be avoided when it's possible and sensible to avoid. I didn't want to condemn this, but I also didn't want to encourage it. Perhaps my previous comment was a little too inaccurate :worried: