Data Driven routes/pages/subpages in React? - reactjs

Question

This is a simplified example...
If I want to pass from a route (the redirect is if the subpage isn't specified):
<Route path="/activities" component={PageElements.SectionPage} onEnter={App.RequireAuth}>
<IndexRoute component={Activities.Redirect}/>
<Route path="/activities/:page" component={Activities.PageSelector} />
</Route>
And then do some magic in PageElements:
export class SectionPage extends React.Component {
constructor(props, context) {
super(props, context);
}
render() {
return <div>
<SiteSubHeader location={this.props.location} />
{this.props.children}
</div>
}
}
and then want to render things inside of a page selector for a section:
export class PageSelector extends React.Component {
constructor(props) {
super(props);
}
render() {
this.pages = {
"overview": <Overview />,
// "overview": Overview, // also doesn't work
"another": <Another />,
"yetanother": <YetAnother />
}
var page = this.props.params.page;
return this.pages.page;
// also a million variants of return <div>{this.pages.page}</div> don't work
// this kind of thing DOES work:
// if (page == "overview") return <Overview />
}
const Overview = () => {
return <div>Overview</div>
}
}
Basically I'm looking for a way to easily generate a number of pages and subpages out of data structures. They are all pretty different and will be different layouts with subcomponents etc. Am I going about this the wrong way? I don't want to have a ton of ifs in the render method.
invariant.js:38Uncaught Invariant Violation: PageSelector.render(): A
valid React element (or null) must be returned. You may have returned
undefined, an array or some other invalid object.
I feel like I'm fighting against React here so I'm probably doing something wrong. Any help would be appreciated.