Passing a Parameter from FlowRouter to a Container?

help
1

I’m trying to pass a parameter from FlowRouter to a container. Here’s how it’s done in sample code I’ve downloaded from a repository:

 FlowRouter.route('/contact/:nav_id', {
    name: 'navigator.single',
    action({nav_id}) {
      mount(MainLayoutCtx, {
        content: () => (<NavigatorsSingle navID={nav_id} />)
      });
    }
  });

But when I do that in my code, my container isn’t called at all. Breakpoints placed in the container code never halt program execution. If I use this next code block, the container is called, but of course the parameter isn’t passed to the container:

 FlowRouter.route('/contact/:nav_id', {
    name: 'navigator.single',
    action({nav_id}) {
        mount(MainLayoutCtx, {content: <NavigatorsSingle />});
    }
  });

How do I pass a parameter to a container from FlowRouter?

For reference, here’s my container code:

import NavigatorsSingle from '../components/navigators_single.jsx';
import {useDeps, composeWithTracker, composeAll} from 'mantra-core';

export const composer = ({context, navID, clearErrors}, onData) => {
  const {LocalState, Meteor, Collections} = context();
  const error = LocalState.get('CREATE_ITEM_ERROR');
  if (navID !== undefined) {
    if (Meteor.subscribe('Navigators.Single', navID).ready()) {
      const theNavigator = Collections.Navigators.findOne(navID);
      onData(null, {item, error});
    } else {
      const theNavigator = Collections.Navigators.findOne(navID);
      if (theNavigator) {
        onData(null, {item});
      } else {
        onData();
      }
    }
  } else {
    onData(null, {error});
  }

  // clearErrors when unmounting the component
  return clearErrors;
};

export const depsMapper = (context, actions) => ({
  // create: actions.items.create,
  // edit: actions.items.edit,
  // clearErrors: actions.items.clearErrors,
  context: () => context
});

export default composeAll(
    composeWithTracker(composer),
    useDeps(depsMapper)
)(NavigatorsSingle);

Thanks in advance to all for any info.

2

I found the answer. In my MainLayoutCTX, I had to change:

                {content}

…to:

                {content()}
3

In routes.jsx

FlowRouter.route('/page/:pageId', {
    action(params) {
        mount (MainLayout, {
            content: (<PageContainer pageId={params.pageId} />),
        });
    },
});

In PageContainer.jsx

export default const DiscoveryPageContainer = createContainer(({pageId}) => {
return { pageId }
}, PageComponent);

You may use pageId to get reactive data for PageComponent. FYI, pageId is automatically available in PageComponent via this.props.pageId.