React-router: Passing data to component via route - json

Question

I generate the routing of my app with the help of a data object which contains information about the routes, the desired path (slug), the according component and eventually sub-routes (nestedRoutes). If a route has nested routes I would like to pass them to the component as a data object and use them in the component e.g. for a sidebar navigation.
The routing is working fine, but I don’t get the data nestedRoutes={route.nestedRoutes} passed to the component.
If you like please take a look at my code snippet:
var data = {
"routes": [
{
"title": "MLS Styleguide",
"slug": "/mls-styleguide",
"component": MLSStyleguide,
"nestedRoutes": [
{
"title": "Basic Typography",
"slug": "/mls-styleguide",
"component": Typography,
"isIndexRoute": true
},
{
"title": "Form & Fields",
"slug": "/mls-styleguide/forms-fields",
"component": FormsFields
},
{
"title": "Form Sections",
"slug": "/mls-styleguide/form-sections",
"component": FormSections
},
{
"title": "Filters",
"slug": "/mls-styleguide/filters",
"component": Filters
},
{
"title": "Side Panels & Containers",
"slug": "/mls-styleguide/side-panels-containers",
"component": SidePanelsContainers
},
{
"title": "Tiles & Content",
"slug": "/mls-styleguide/tiles-content",
"component": TilesContent
},
{
"title": "Tooltips & Notifications",
"slug": "/mls-styleguide/tooltips-notifications",
"component": TooltipsNotifications
}
]
},
{
"title": "Playground",
"slug": "/playground",
"component": Playground
}
]
}
module.exports = (
<Route path="/" component={App}>
<IndexRoute component={Home}/>
{data.routes.map(
function(route) {
if (route.nestedRoutes) {
return (
<Route path={route.slug} nestedRoutes={route.nestedRoutes} key={route.title} component={route.component}>
{route.nestedRoutes.map(
function(nestedRoute) {
if (nestedRoute.isIndexRoute) {
return (
<IndexRoute key={nestedRoute.title} component={nestedRoute.component}/>
)
} else {
// {console.log(nestedRoute.slug)}
return (
<Route path={nestedRoute.slug} key={route.title} component={nestedRoute.component}/>
)
}
}
)}
</Route>
)
} else {
// console.log(route.slug)
return <Route path={route.slug} foo="bar" key={route.title} component={route.component}/>
}
}
)}
</Route>
)
Any comment or hint in the right direction is welcome, thanks!
EDIT
Code of the receiving component.
Please don’t wonder! The links data in the getInitialState() function serves as a workaround at the moment. When the component actually receives the this.props.nestedRoutes this will be removed.
I hope you get the idea!
export default React.createClass({
getInitialState(){
return {
links: [
{
"title": "Basic Typography",
"slug": "/mls-styleguide/"
},
{
"title": "Form & Fields",
"slug": "/mls-styleguide/forms-fields"
},
{
"title": "Form Sections",
"slug": "/mls-styleguide/form-sections"
},
{
"title": "Filters",
"slug": "/mls-styleguide/filters"
},
{
"title": "Side Panels & Containers",
"slug": "/mls-styleguide/side-panels-containers"
},
{
"title": "Tiles & Content",
"slug": "/mls-styleguide/tiles-content"
},
{
"title": "Tooltips & Notifications",
"slug": "/mls-styleguide/tooltips-notifications"
},
]
}
},
render() {
return (
<div>
<Sidebar className="left">
<SideNavbar links={this.state.links}/>
{/*<SideNavbar links={this.props.nestedRoutes}/>*/}
</Sidebar>
<div className="content-container">
{console.log(this.props.nestedRoutes)}
<h2>MLS Styleguide</h2>
{this.props.children}
</div>
</div>
)
}
})

Answer 1

It seems that I am not able to understand the provided solutions.
But I found a workaround: I just took the data, put it in a separate file and imported it in both files. It serves the purpose, it is simple and it is done.
Thank you all for your support!