React-Router 1.0 and piwik-react-router integration

[rgommezz]

Prior to 1.0, with the version 0.13.2 of React-Router we had an easy way to track user navigation using this library utility, by passing the router state directly to the utility, so that any time user changed the route, the line PiwikUtil.track(state) was executed:

Router.run(routes, Router.HistoryLocation, function(Handler, state) {
  React.render(<Handler title="app.title" urlParams={state.params} urlQuery={state.query}/>, document.getElementById('app'));
    PiwikUtil.track(state);
});

Are you guys planning to upgrade the library to the version 1.0?

Anyway, we had to upgrade the codebase to the version 1.0 of React-Router and they way I came up to work the problem around was to use onEnter callbacks to all the children routes, since there I have access to the router state. But that would imply to add the callback every time I add a new route. Do you think is there a better way to achieve that, such as with the previous version?

function trackRoute(nextState, replace) {
  PiwikUtil.track(nextState);
}

var routes = (
    <Route path={root} component={App} >
      <IndexRoute component={Component1} onEnter={trackRoute} />
      <Route path={root + '/filters/:filters'} component={Component1} onEnter={trackRoute}/>
      <Route path={root + "/detail/:id"} component={Component2} onEnter={trackRoute} />
      <Route path={root + "/detail/:id/:tab"} component={Component2} onEnter={trackRoute} />
      <Route path={root + "/create"} component={Component3} onEnter={trackRoute} />
    </Route>
    );

React.render(<Router history={history}>{routes}</Router>, document.getElementById('app'));

[joernroeder]

Cool that you've tried to use the package with the new router – too bad that it didn't work. :) I had some time today and tried to find a good place to inject the callback that triggers the tracker and ended up attaching a listener to the history object on router creation via the new .connectToHistory function.

<Router history={piwik.connectToHistory(history)}>
    <Route path="/" component={MyComponent} />
</Router>

The main difference is that piwik is getting the state from the history and not the router anymore and the given state object changed slightly.

See the old router state vs. the new history state (i've patched the missing state.path so the following call to track(state) didn't change)

Please check out the react-router1.0.x-experimental branch and i will merge it to master if everything runs smoothly

:turtle:

[joernroeder]

@rauliyohmc have you tried the experimental branch? I played with the experimental branch as well and everything went fine. I will update the readme and merge it to master by the end of the week.

[rgommezz]

@joernroeder I ended up attaching a listener to the history object, same as you did, and it works fine. Pretty much what you did with your patching. Didn't have time to try your branch, but glancing at the code I can foresee it would work as expected :)

[rgommezz]

I believe you could close the issue, once the readme is updated