Ben Ben - 1 month ago 12
React JSX Question

How to emulate window.location with react-router and ES6 classes

I'm using react-router, so I use the

<Link />
component for my links throughout the app, in some cases I need to dynamically generate the link based on user input, so I need something like
window.location
, but without the page refresh.

I found this little note - (https://github.com/rackt/react-router/issues/835) - i tried using
this.context.router.transitionTo(mylink)
but I'm having issues with context...

which led me to (https://github.com/rackt/react-router/issues/1059), however context returns and empty object, so when I try todo something like:
this.context.router.transitionTo(mylink);
I get
Cannot read property 'transitionTo' of undefined
(if I try to do something like set this.context = context within the constructor).

Not to drag on, but I'm also weary of messing too much with context as it is undocumented on purpose as it's still a work in progress, so I've read.

Has anyone come across a similar issue?

Ben Ben
Answer

Found a solution here: https://github.com/rackt/react-router/issues/975, and here: https://github.com/rackt/react-router/issues/1499

Needed in constructor:

class SidebarFilter extends React.Component {

    constructor(props, context) {
        super(props, context);

Also need to add a static property:

SidebarFilter.contextTypes = {
  router: React.PropTypes.func.isRequired
};

Then I could call:

this.context.router.transitionTo(/path-to-link);
Comments