Dynamic React-Router 1.0.0-rc3 - reactjs

Question

Regardless of what I have read from the folks at react-router, I
prefer my app's router have dynamic data, and I have been successful
in doing it, with one caveat: I cannot loop recursively for child
routes.
Here is a working dynamic react-router:
export default class Index extends React.Component {
constructor() {
super();
this.state = {
navItems: [] };
}
componentWillMount() {
NavMenuAPI.getAll()
.then((response) => {
const data = response.data;
this.setState({ navItems: data });
});
}
fetchMenuSystem(data) {
const routes = [];
data.map(function(route) {
let routePaths = [];
let component = {};
if (route.linkTo === '/') {
const pageApp = route.title.replace(/ /g, '-').toLocaleLowerCase();
component = require('./components/pages/' + pageApp);
} else {
const pageApp = route.title.replace(/ /g, '-').toLocaleLowerCase();
component = require('./components/pages/' + pageApp);
}
if (route.paths === undefined) {
routePaths.push(route.linkTo);
} else {
routePaths = JSON.parse(JSON.stringify(route.paths));
}
routePaths.map(function(path) {
const props = { key: path, path, component };
// Static `onEnter` is defined on
// component, we should pass it to route props
// if (component.onEnter) props.onEnter = component.onEnter;
routes.push(<Route { ...props } />);
});
//////////////////////////////////////////////
// PROBLEM !!!!!!!!!!
// if (route.childNodes !== undefined) {
// this.fetchMenuSystem(route.childNodes);
// }
});
return routes;
}
fetchRoutes() {
const data = this.state.navItems;
const result = this.fetchMenuSystem(data);
return (
<Route component={ require('./components/APP') }>
{ result }
<Route path="*" component={ require('./components/pages/not-found') }/>
</Route>
);
}
render() {
if (this.state.navItems.length === 0) return <div>Loading ...</div>;
const routerProps = {
routes: this.fetchRoutes(),
history: createHistory({
queryKey: false
}),
createElement: (component, props) => {
return React.createElement(component, { ...props });
}
};
return (
<Router { ...routerProps } />
);
}
}
ReactDOM.render(<Index />, document.getElementById('reactRoot'));
As I said, this works, however, only for the first level, when I try to recursively loop through for any childNodes, I receive the error:
TypeError: Cannot read property 'fetchMenuSystem' of undefined
I tried to bind the call to the fetch function and bind the mapping, none of which worked.
I would greatly appreciate assistance on this.

Answer 1

OK, I solved this. The problem lied with the routes state & the 'this' keyword.
Here are the changes:
export default class Index extends React.Component {
constructor() {
super();
this.state = {
navItems: [],
routes: []
};
}
................
fetchMenuSystem(data) {
const currRoutesState = this.state.routes;
const self = this;
data.map(function(route) {
................
routePaths.map(function(path) {
................
currRoutesState.push(<Route { ...props } />);
});
if (route.childNodes !== undefined) {
self.fetchMenuSystem(route.childNodes);
}
});
return currRoutesState;
}
................
}
Final thoughts if you plan on using this:
[Re: npm install --save history]
I had to opt for 100% client side routing,
(not isomorphic/universal) so in my imports ....
import createHistory from 'history/lib/createHashHistory';
// import createBrowserHistory from 'history/lib/createBrowserHistory';