With getComponent how to pass props?

Question

I can't figure out how to pass props to the component. This is important as I don't want to fetch data in the componentDidMount method as it will then be invisible to search engines.

My code looks like this

const router = 
<Route path="/" component={App}>
<IndexRoute onEnter={redirectToLogin} component={LandingPage} />
<Route path="panel" component={ ControlPanel }>
  ...
</Route>
<Route 
  path="/:handle" 
  onEnter={maybeRedirectToHome}
  getComponent={(location, callback)=> {
      getSiteHandleByName(location.pathname.slice(1))
      .then(function(handle){
        if (handle){
          callback(null, Portfolio)
        } else {
          callback(null, NotFound)
        }
      })
      .catch(callback)
  }}
  getChildRoutes={(location, callback)=> {
    callback(null, portfolioRoutes)
  }} 
/>
</Route>

I'm trying to serve up a portfolio React App when the user visits a valid url like mysite.com/thishandleisvalid but I'll need to also fetch all the content for that app at the getComponent point and pass it in as a property. E.g. you might normally do something like this <Portfolio contentItems={fetchedItems} />.

Is doing this possible?

Answer 1

This is really easy to do with stateless components. Just do something like:

function getComponent(location, callback) {
  const Component = /* ... */;
  const items = /* ... */;

  callback(null, props => <Component {...props} items={items} />);
}

The reason we don't explicitly support this sort of pattern is because it's fairly atypical to wire things up this way - for apps that need to deal with this sort of thing, it's much more common to use the onEnter hook to e.g. populate a Flux store, then connect the components as appropriate to the relevant stores.

Answer 2

Also if you don't mind accessing props under route, you can pass props like this:

JSX:

<Route 
  path="route_path" 
  customProp="hello"
  getComponent={(location, cb) => {
    // ...
  }}

Programatically:

childRoutes: [
{
  path: 'route_path',
  customProps: 'hello',
  getComponent(location, cb) {
    // ....
  },

And customProp will be available via props.route.customProp