Reputation: 30865
So, the <Route>
component of react-router
has components
attribute (docs):
<Route path="latest" components={{sidebar: Sidebar, content: ContentLayout}} />
Then in an appropriate component I can call those components through component's props:
render() {
<div>
{this.props.sidebar}
{this.props.content}
<div>
}
However without react-router
I would do this, I pass my component custom props:
render() {
<div>
<Sidebar names={ ['foo', 'bar'] } isOpen={true} num={10} />
<ContentLayout type={ contentType } background={'#fff'} title={titleOne} />
<div>
}
My questions is. How can I pass props to my component when I use components
attribute of React Router <Route>
component?
The best way would be something like this:
render() {
<div>
{<this.props.sidebar names={ ['foo', 'bar'] } isOpen={true} />}
{<this.props.content type={ contentType } background={'#fff'} />}
<div>
}
Upvotes: 0
Views: 175
Reputation: 8781
One solution for this is to clone the components and specify new props for them in the cloning process. Something like:
render() {
return (<div>
{React.cloneElement(this.props.sidebar, props={names: ['foo', 'bar'], isOpen: true})}
{React.cloneElement(this.props.content, props={type:contentType, background: '#fff'})}
</div>);
}
Upvotes: 1