Meteor use React Router with Iron Router

Question

I'd like to know how to use React Router with Iron Router. The reason is that I started using React and React Router for an existing project.

Here is what I am doing currently:

• Render a Blaze template using iron router
• Using Template#onRendered, render React app inside the template.

routes.js

Router.route('/admin/:tab1?/:tab2?/:tab3?/:tab4?', function () {
  this.layout('admin');
});

admin.html

<template name="admin">
  <div id="admin-wrapper"></div>
</template>

admin.js

Template.admin.onRendered(function () {
  render((
    <Router>
      ...
    </Router>
  ), this.find('#admin-wrapper'));
});

But the problem is that the React app does not redraw the components as the URL changes. I have to refresh the whole page in my browser to see an updated page. Any ideas, or alternative approaches?

Answer 1

The two routers are incompatible because they push different states to window.history.

A solution is to use memoryHistory to configure routes in React Router. Then, listen to window.history.pushState and push the new url to memoryHistory.