Passing property through router - reactjs

Question

This is for a react-native app
I'm trying to pass a property to a component through a router like so:
I have a button with an onPress like so in separate component:
_onPress() {
this.props.navigator.push(Router.getDealList(this.state.categoryName, this.state.categoryId));
}
With the router defined as:
const Router = {
getDealList(categoryName, categoryId) {
return {
renderScene() {
let DealList = require('./components/DealList').default;
debugger;
return <DealList categoryId={categoryId} />;
},
getTitle() {
return categoryName;
},
};
},
};
However, when I try to access the property in the DealList component, it seems to be undefined. I am attempting to do this like so:
_onFetch(page = 1, callback) {
const categoryId = this.props.categoryId;
...
}
I've attempted to debug this and it seems to have the variables up until the point where I try to call _onFetch

Answer 1

I have used a different approach in my React native app. Please be patient, this might give you a clue or you can adopt the same way altogether.
In main.js I have this structure which takes care of everything smoothly.
Top level views:
var Splash = require('./views/splash');
var Signin = require('./views/signin');
var Signup = require('./views/signup');
var Home = require('./views/home');
Routes:
var ROUTES = {
splash: Splash,
signin: Signin,
signup: Signup,
home: Home,
};
And navigator looks something like this. Observe "data" being passed as a prop to respective Component in renderScene()
render: function(){
return(
//Render first view through initialRoute
<Navigator
style={styles.container}
initialRoute={{ name: 'home', index: 0 }}
renderScene={ this.renderScene }
configureScene={ () => { return Navigator.SceneConfigs.PushFromRight; }}
>
</Navigator>
)
},
renderScene: function(route, navigator){
//ROUTES['signin'] => SignIn
var Component = ROUTES[route.name];
return (
<Component
route={route}
navigator={navigator}
data={route.data}
/>
);
}
When I want to push a new View in my app I simply do this-
onPressNewBooking: function(){
this.props.navigator.push({ name: 'newbooking', data: this.state.rawData })
}