Passing objects between routes with React and FlowRouter

help
1

I have a common pattern I’m trying to implement with React and FlowRouter, which are both new to me. I’m curious as to what others use, or is considered best practice, as I’m not terribly happy with the UX of my current implementation.

I am trying to navigate from a list of objects - blog posts, todo tasks, etc, to one individual object. When doing so, I want to update the route (’/:objects’ -> ‘/:objects/:object’), and also display object specific data (blog post content, todo task details, etc).

Right now, I am using component (or template, if using Blaze) level subscriptions, example below, which seems to be the preferred way to go, moving data subscriptions out of the router. However, the way I have figured out how to this involves passing the object._id via the route to the new route, and re-subscribing to the object. This causes an unnecessary delay.

Is there a way to pass an object between routes with React and FlowRouter? It seems like passing props would be the answer, but is this possible using FlowRouter to simultaneously update the URL? Thanks

// Routes note: taskRoutes is a FlowRouter group

taskRoutes.route('/', {
    name: "Tasks",
    action() {
        ReactLayout.render(AppBody, {
            header: <Header />,
            content: <TaskList />,
            tabs: <Tabs />
        })
    }
});

taskRoutes.route('/:task_id', {
    name: "Task Name",
    action(params) {
        ReactLayout.render(AppBody, {
            header: <Header task={params.task_id} />, // passing object._id here, but want to pass whole object
            content: <TaskPage />,
            tabs: <Tabs />
        })
    }

// Link to navigate to new task
<a className="dark" href={FlowRouter.path("Task Name", {task_id: this.props.task._id})}><i className="icon ion-ios-arrow-right"></i></a>

// React component to load new subscription

// Task List Header
Header = React.createClass({
  mixins: [ReactMeteorData],
  
  getMeteorData() {
      if (this.props.task) {
      var handle = Meteor.subscribe('single_task', this.props.task);  

      return {
        taskLoading: ! handle.ready(),
        task: Tasks.findOne({_id: this.props.task})
      }
      } else {
          return {};
      }
  },
  ...//render() goes here