Converting Flow Router from Blaze to React - Route Changes but Template Not Removed

help
1

I am in the process of trying to convert from Blaze to React based on MDG’s recent comments.

I am using FlowRouter.

I have a very simple line that grabs the route for “privacy” from FlowRouter and plugs it in using a blaze helper function.

<a href="{{pathForPrivacy}}">Privacy</a>

I am starting with the simplest route, and switched to the below code:

FlowRouter.route('/privacy', {
  name: 'privacy',
  action() {
    mount(ApplicationLayout, {
      content: <Privacy/>,
    });
  },
});

If I go directly to localhost:3000/privacy it works fine, but if I click the “privacy” link on the landing page, the url changes appropriately, but the component gets added to the bottom of the landing page template and there is no refresh of the page. Why is the landing page template not removed and the page refreshed?

2

So, I think your landing page is Blaze. Right ?

If yes then Blaze and React in Meteor use different container. #__blaze-root and #react-root.

When you go to your landing page then Blaze template rendered inside body > #__blaze-root and then from landing page you go to FlowRouter.path('/privacy') then your Privacy component get rendered in body > #react-root . So you got your privacy below your landing page.

To overcome this issue, I use componentDidMount in Privacy component and just hide #__blaze-root using jQuery.

Hope this help.

1 Like
3

Thank you for this. Yes you are right the landing page was in Blaze, and I appreciate the root of the problem now.

I tried this solution and it feels a little bit hacky. As an example, now the Back button no longer works.

I guess the best approach is to wrap all of my React Components in a Blaze Template. When every route’s default template is converted to a React Component wrapped around a Blaze Template then you remove the Blaze Wrapper on all templates and switch over to React Flow Router, aka #react-root.

Having an application with both #__blaze-root and #react-root do not seem to play well together.

I am surprised there is not more commentary on this.

1 Like
4

I’m having the same behavior, is there a better way of fixing this?