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

Question

可能与render方法在react-router中的工作原理以及安装＆＃39;真的意味着在React。我阅读了文档并且说：

  

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

     

渲染： 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中看到该组件确实已经消失......

那么这里发生了什么？有没有办法让组件保存其状态，只是＆＃34;隐藏＆＃34;？

感谢您的帮助！

Answer 1

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

<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>