使用渲染时,React-router v4卸载

Question

可能与该render方法的工作方式react-router以及"安装"在React中的实际含义有点混淆.我阅读了文档,它说:

当您使用组件(而不是下面的render或children)时,路由器使用React.createElement从给定组件创建新的React元素.这意味着如果为组件属性提供内联函数,则每次渲染都会创建一个新组件.这导致现有组件卸载和新组件安装,而不是仅更新现有组件.使用内联函数进行内联渲染时,请使用render或children prop(下面).

render:func 这允许方便的内联呈现和包装,而不需要上面说明的不希望的重新安装.

所以我预计当url发生变化时,现有组件将不会被卸载,而是保留在那里,从而保存其状态.但这不是我观察到的.这是我的代码:

<div style={styles.content}>
    <Route path={`${this.props.match.url}/summary`} render={() => <ETFViewer/>} />
    <Route path={`${this.props.match.url}/proxy`} render={() => <Proxy/>} />
</div>

因此,组件ETFViewer和Proxy得到渲染精细并没有什么与他们错了,但我注意到,当我从移动/proxy到/summary和背部的状态丢失!此外,我可以在Chrome的React devtools中看到该组件确实已经消失了......

那么这里发生了什么？有没有办法让组件保存其状态并"隐藏"？

谢谢你的帮助!

Answer 1

这个问题有点老了，但在我最近的搜索中出现了。我认为问题在于您没有将 props 与组件一起传递。这是一个例子：

<div style={styles.content}>
<Route path={`${this.props.match.url}/summary`} render={props => <ETFViewer {...props} />} />
<Route path={`${this.props.match.url}/proxy`} render={props => <Proxy {...props} />} />                      
</div>