How to navigate to new route outside of a React Component

[EvHaus]

Is it possible to interact with the React Router outside a React Component's context?

For example, let's say I want to have a random Javascript module simply navigate me to the home page every 10 seconds, ie:

var Router = require('react-router');

module.exports = function () {
    setTimeout(function () {
        // Need a way to navigate the router here since I don't have access to React.context
        Router.Something.navigate('/home');
    }, 10000);
};

[EvHaus]

Nevermind. Looks like the solution is to save the return value from Router.run.

// Where ever you call Router.run(). Save the return value
window.AppRouter = Router.run(...);

// Now you can reference the Router programmatically anywhere
setTimeout(function () {
   window.AppRouter.transitionTo('/home');
}, 10000);

I would recommending adding this to the docs as it wasn't obvious that the return value of Router.run was actually useful.

[srph]

This seems to be kind-of-indirectly documented. Check the Router.create documentation instead 😉

[markthethomas]

Is there a better way to do this with in an individual component than assigning it to the global window object? I try to avoid that when possible :) I'm using browserify to bundle my react app and the Router.run() is called in a root App component. I would just use the mixin to accomplish this, but I've read that mixins are on their way out as far as react goes and am trying to avoid relying on them too much

[EugeneZ]

If you're using browserify, you can simply export the return value of Router.run().

//router.js
module.exports = Router.run(...)

//MyComponent.js
var router = require('./router.js');
router.transitionTo('routeName');

[markthethomas]

Yeah, that was my initial approach, but for some reason browserify is having trouble requiring it; I persistently get a cannot find module ../app. Trying to require it w/ the following structure consistently throws an error:
----../other-files
----jsx/
--------| app.jsx (w/ module.exports = Router.run(...))
--------| shared/
------------| File-A (requireing from here as require('../app))

Really puzzled by why it's not working. Other sibling files of the same kind don't throw an error. At any rate, this isn't a react-router thing as far as I can tell.

[th0r]

@markthethomas Maybe circular dependency?

[EugeneZ]

@markthethomas I had the same issue. Place your require('../app') call inline worked for me. I don't know why!

[markthethomas]

@th0r I thought so too but doesn't seem to be the case based on my different requires. I'll try inlining it. Thanks all!

[markthethomas]

Still not working with require('../app.jsx').transitionTo('/foobar);. I'll have to keep looking into it

[ryanflorence]

you've probably got circular deps, might need a module/container to register the instance on, then other modules can require that container and ask for it later.

[markthethomas]

Good point; I'll try that. Thanks!