gistfile1.md

Can't seem to loop through <Location> components using .map as I get the following error as it's being passed as a string:

Error: Invariant Violation: Route handler should be a component or a function but got: MainPage

Array in question and the component:

[{
	'path': '/',
	'handler': 'MainPage'
},{
	'path': '/users/:userName',
	'handler': 'UserPage'
}]

var App = React.createClass({
	render: function() {
		var createRoute = function(item) {
			return <Location path={item.path} handler={item.handler} />
		}
		return (
			<Locations path={this.props.path}>
				{this.props.paths.map(createRoute)}
				<NotFound handler={NotFoundPage} />
			</Locations>
		)
	}
})

Ah I see what you're trying to do. I sidestepped this in my applications by actually running the React code on the server via Webpack. You could also do the same with Browserify. So long as you feed the server the exact same data that you're feeding to the client, the prerender will be identical.

To be honest, I'm a bit murky about what JSX does when you put both an array and a single element as children of an element. I don't think it's smart enough to concatenate them into an array. Try something like this:

var App = React.createClass({
  createRoute: function(item) {
    return <Location path={item.path} handler={item.handler} />
  },
  createRoutes: function(paths) {
    return paths.map(this.createRoute).concat(<NotFound handler={NotFoundPage} />);
  },
  render: function() {
    return (
      <Locations path={this.props.path}>
        {this.createRoutes(this.props.paths)}
      </Locations>
    );
  }
})

It works! Thanks

Just had to switch item.handler to test[item.handler] - just need to convert test to module.exports now :)