score:2

Accepted answer

try this:

<router>
    <route path='/' component={(props) => 
        (<somecomponent value={this.state.value} {...props} )/>} />
</router>

note, you need to pass ...props if you want to access route properties in the component (such as match, location or history like in this.props.history in the component's code).


update:

for performance reasons, it might be better to use render in this case, like in:

 <router>
        <route path='/' render={(props) => 
            (<somecomponent value={this.state.value} {...props} )/>} />
    </router>

as per react docs:

when you use component (instead of render or children) the router uses react.createelement to create a new react element from the given component. that means if you provide an inline function to the component attribute, you would create a new component every render. this results in the existing component unmounting and the new component mounting instead of just updating the existing component. when using an inline function for inline rendering, use the render or the children prop (below).


Related Query

More Query from same tag