React, flow router get params and react containers

help
1

How do I get the params of a route inside a react component
Im using react containers from the react composer package
if this is the whole route

https://learnbuildrepeat-tevinthuku.c9users.io/ReadProjectMeta/wD98XTTtpf8ceyRJT

How do I get only

wD98XTTtpf8ceyRJT

and store its value in a variable inside a react component.
Ive tried to use

FlowRouter.getParam() but it doesnt work. I keep getting undefined

  import React from 'react';

   export default class ReadProjectMetaLayout extends React.Component {
             render() {
                     var category = FlowRouter.getQueryParam();
                      console.log(category);
              return (
                   <div>
                        <h4>Hello World</h4>
                     </div>
)
}
}

this is the route

  FlowRouter.route("/ReadProjectMeta/:_id", {
    name: 'project.meta',
    action(params) {
      mount(ReadProjectMetaLayoutContainer, {
        components: (<ReadProjectMeta  _id={params._id}/>)
      })
    }
  });

What could be the problem and gow do I solve it

2

Try switching from FlowRouter.getQueryParam to FlowRouter.getParam instead:

...
const category = FlowRouter.getParam('_id');
...
3

You can pass both params from the router as props for the react component:

 FlowRouter.route("/ReadProjectMeta/:_id", {
    name: 'project.meta',
    action(params, queryParams) {
      mount(ReadProjectMetaLayoutContainer, {
        components: (<MyComponent  _id={params._id} category={queryParams.category}/>)
      })
    }
  });

params are path-params, whereas queryParams are url-params, e.g. in the url …/ReadProjectMeta/12341234?category=mycategory

12341234 would be params._id and mycategory would be in queryParams.category.

FlowRouter.getQueryParam and FlowRouter.getParam can also return these values and are reactive data-sources. They therefore need to be in a reactive context like in a createContainer-call or in the older getMeteorData-Mixin (or in any helper in blaze), but in your example, it is best to pass the params from the router as props to the component like described above.

4

Try console.log(this.props._id); in your component instead of displaying it through FlowRouter. If you want to stick to the router method then don’t forget to import it in your .jsx file, like so import { FlowRouter } from 'meteor/kadira:flow-router';