With getComponent, how to pass props?

Question

I can’t figure out how to pass the details to the component. This is important, since I do not want to receive data in the componentDidMount method, since it will be invisible to search engines.

My code is as follows

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 am trying to execute the React App portfolio when a user visits a valid URL, for example mysite.com/thishandleisvalid , but I need to also get all the content for this application at getComponent and pass it as real estate. For instance. you can usually do something like this <Portfolio contentItems={fetchedItems} /> .

Makes it 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 that we clearly do not support this type of template is that it is rather difficult to use this technology - for applications that need to deal with such things, the onEnter hook is used more often, for example, to fill the Flux store, then connect the components corresponding to appropriate repositories.

Answer 2

Also, if you are not opposed to accessing details in the route , you can transfer the details as follows:

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 through props.route.customProp

Answer 3

currying looks like an easier way (and even easier with recompose / withProps)

 const getComponentWithProps = (props) => (location, cb) => { const Component = /* ... */; // ... cb(null, withProps(props)(Component)) } ... childRoutes: [ { path: 'route_path', getComponent: getComponentWithProps({ foo: 'bar' }), } ] 

UPDATE

CAUTION: PERFORMANCE my version is just the answer to the sugar diagnosis, and I suppose it has the same problems: it causes a complete redistribution of components when redirecting.

this is due to the re-arrangement of the component using Enhancer for each new location that generates a new component with each redirection.

As a quick fix, I decided to cache all the improvements in weak maps. in my case it looks like

 const getOrAdd = (map) => (value = Function.prototype) => (key) => map.get(key) || ( map.set( key, value(), ) && map.get(key) ); const componentsMap = new WeakMap(); export const getEnhancedMap = getOrAdd(componentsMap)(() => new WeakMap()); export const getEnhancedComponent = ( component, enhancer, ) => { const enhancedMap = getEnhancedMap(component); return getOrAdd(enhancedMap)(() => enhancer(component))(enhancer); }