React-router: v4 Unsure about differences between 'render=' and 'component=' attributes for 'Routes'

[achung89]

Unsure about the differences between the attributes 'render=' and 'component='. Documentation states that 'render' accepts a function with a parameter 'props', which to me sounds like a component. 'render' function also needs rendered elements to be returned, just like a component would.

Used both attributes interchangeably, and both worked for my components and functions.

Version

4.0.0-beta.5

[mjackson]

I added some more detail that hopefully makes the distinction clearer. When you use component we actually create a new React element for you. When you use render, we don't. So your component tree is different depending on which one you use.

[benhannel]

I'm still a bit confused. When you use render, is the component unmounted and remounted still when you navigate away and back? Is its state preserved?

[franklixuefei]

@mjackson Probably this is just a React related question... but since this problem was brought up, I would like to understand it thoroughly. From the source code, if we choose to use component=, then we end up calling React.CreateElement(component, props). However, I don't understand why using component= will trigger an unmount and mount, while render= won't? Wouldn't React compare the tree and only update what's necessary? If I use render=, React does the right thing and updates only what's necessary.

[binarybaba]

I think component={} unmounts and remounts the component whereas render doesn't remount the component. I tried making dummy ajax calls in the componentDidMount lifecycle method and the ajax requests were called when using component but was NOT called when using render. I guess it's safe to say that render doesn't unmount and remount the component.