Search code examples
javascriptmeteorreactjsflow-router

Meteor flow router and getting params of route in a react component


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 how do I solve it


Solution

  • To only get the last part of the string:

    location.pathname.substr((location.pathname.lastIndexOf('/')+1))
    

    Another pure meteor based thing you can try is from this reference:

    FlowRouter.getParam(":_id");
    

    NOTE: Your solution didn't work as you are getting query parameter, query parameters are the parameters that are passed in the url after '?'

    i.e. /apps/this-is-my-app?show=yes&color=red

    Here in above code color and show are query parameters, while apps is a part of pathname