JoeTidee JoeTidee - 1 month ago 5
React JSX Question

How to pass a component as a prop from React Router?

I have a Meteor/React application with the following React Router set up:

<Router history={browserHistory}>
<Route path="/app" component={AppWrapperContainer} >
...
<Route path="/app/somepath" component={SomeComponentContainer} />
...
</Route>
</Router>


SomeComponentContainer
is a container component that collects data from MongoDB and passes it to
SomeComponent
(not shown above). I need to pass
SomeComponentContainer
into a generic wrapper component, lets call it
GenericWrapper
, such that it looks like this:

<GenericWrapper component={SomeComponentContainer} />


and
GenericWrapper
will render whatever component is passed to it:

export default class GenericWrapper extends Component {
...
render(){
return (
<{this.props.component} {...props} />
);
}
}


1) How is this written at the React Router level?
2) How is this written for
GenericWrapper
to accept the component?

Answer

Sorry for a late reply, and I couldn't update it in the comments :)

The idea is roughly as follows,

Define a Higher order component for GenericWrapper as below,

export function GenericWrapper(Component) {
    class GenericWrapperComponent extends React.Component {
     ....
    }
}

and in router,

<Router history={browserHistory}>
    <Route path="/app" component={AppWrapperContainer} >
        ...
        <Route path="/app/somepath" component=GenericWrapper(SomeComponentContainer) />
        ...
    </Route>
</Router>