Update React props on URL change using IronRouter

react
1

Hey guys,

I have started a big project using Meteor, where things where still Blaze and no ES2015 modules several months ago.

With Meteor 1.3, I have decided to first use React because things got out of hand with the sheer amount of codes where I had to basically split the HTML and the JS codes, effectively doubling the amounts of files I had to deal with. I have been using IronRouter (yes I know, not the easiest thing to work with React but currently, I have no time to switch to FlowRouter or React router).

I have something like this:

Router.route('/reporting/:section', function () {
  this.render('Reporting', {data: {
    params: this.params
  }});
}, {name: 'reporting'});

Then, I create a template according to that name, then I also create a JSX file that has something like this:

import ReportingPage from './../../imports/ui/client/pages/Reporting.jsx';

Template.Reporting.onRendered(function () { //
  ReactDOM.render(<ReportingPage params={this.data.params} />, document.getElementById('reporting-container'));
});

Template.Reporting.onDestroyed(function () { //
  ReactDOM.unmountComponentAtNode(document.getElementById('reporting-container'));
});

Now, when the URL changes, like going from /reporting/default to /reporting/next, how do I get the React component ReportingPage have its props updated?

2

I’d use one of the pre-made blaze to react adapter packages from atmosphere, they handle this for you. There’s one recommended in the Meteor guide about react, but I’m on my phone so can’t post a link now.

3

Thanks for the reply @sashko … nice to get a reply from the team.

Well, I didn’t receive any reply for quite a time, so I assumed I was just on the wrong way. I thus changed things around and am now using FlowRouter.

The change wasn’t so hard, appart from trying to use useraccounts:bootstrap and all related package, but I fail badly to get the integration right. May be, again, I was on the wrong path again. Would be useful for the others and me to get a guide on this move.