Reactively set "active" class (React) depending on which FlowRouter route is active

help
1

I can get this working on load but when the route changes the class doesn’t update - the FlowRouter current() method is not reactive.

I think I need to use createContainer/Tracker to make it reactive within the React component but I’m not sure how to put it together.

I looked into zimme:active-route but I don’t think that works with React (only Blaze)

2

is it your code changing the route?
if so you can change the state/props of the needed component

3

Thanks for the suggestion!

I managed to solve this:

  • FlowRouter does expose some reactive methods
  • FlowRouter.getRouteName() is a reactive method for getting current route
  • If you use that method inside the Meteor 1.3 createContainer this will make it a reactive data source within a React component
  • Create a small helper function which returns “active” if the current path (passed through createContainer) equals the path passed to the function
  • Inside the render method use className={yourHelper(“route”)}